【小技巧】css3 scale 或者zoom实现文本根据容器自动缩放
来源:互联网 发布:手机淘宝买家等级查询 编辑:程序博客网 时间:2024/05/22 03:05
在开发手机web经常会用到
效果
上面的文字会随着容器变小变大自动缩放。
实现代码
ie使用
zoom
火狐或其他浏览器使用transform:scale
源码*
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>二维码</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <style type="text/css"> #box { margin: 10% 0 0 0;width: 100%; } #content { white-space: nowrap; display:inline-block; } </style></head><body> <div id="box"> <div style="transform: scale(0.949134); width: 80%; margin-left:10%; text-align: center; overflow: hidden; text-overflow: ellipsis;" id="content">该二维码永久有效,请保存至您的手机</div> </div> <script type="text/javascript"> $(function () { var $content = $('#content'); // 通过 zoom 来调节文字大小 var zoom = $content.width()/300; $content.css('zoom', zoom); $content.css('-moz-transform', 'scale(' + zoom + ')'); $content.css('-moz-transform-origin:', "top left"); }) </script></body></html>
源码下载:http://pan.baidu.com/s/1pLlCtN9
1 0
- 【小技巧】css3 scale 或者zoom实现文本根据容器自动缩放
- 【CSS3】变形--缩放 scale()
- css3 2D--transform--scale缩放
- css3 scale实现放大缩小
- css3实现浏览器缩放
- 关于android TextView在不需要较焦点的情况下,自动滚动文本实现小技巧
- 7:---(3)CSS3中的变形--缩放 scale()
- css3 来实现图片在指定容器内等比例缩放,并控制中上下左右居中
- css3 来实现图片在指定容器内等比例缩放,并控制中上下左右居中
- 【CSS3】---样式小技巧
- CSS3 小技巧/注意事项
- android 多点触摸 实现图片缩放 Image Zoom
- android 多点触摸 实现图片缩放 Image Zoom
- android 多点触摸 实现图片缩放 Image Zoom
- android 多点触摸 实现图片缩放 Image Zoom
- 图像缩放Title、Zoom、Stretch的实现方式
- Cocos2dx 小技巧(十四)ScrollView实现缩放效果
- Cocos2dx 小技巧(十四)ScrollView实现缩放效果
- 判断两个对象是否一样
- SQL :多条记录取最前面一条或根据条件任取N条。。。。。。
- [BZOJ2705][SDOI2012]Longge的问题(数论)
- 什么是ajax
- JavaWeb开发环境搭建
- 【小技巧】css3 scale 或者zoom实现文本根据容器自动缩放
- Ubuntu与开发板之间使用ftp上传及下载文件
- 在活动中随时退出程序
- Opencv 学习笔记之——鼠标操作画出感兴趣区域
- 强制去除Xcode的警告
- 【数论】 【逆元】 【O(n)求逆元】
- 测试与SQL Server的连接是否正常
- js table 以第几行的第几列作为标准合并
- Tomcat发布多个项目时抛的webAppRootKey错误