根据viewport的size自动调整fontsize大小
2015-11-12 17:41
381 查看
现在的网站必须要考虑mobile上访问的友好性,bootstrap作为mobile first的前端框架得到很多应用,它通过默认就使用.col-xs-xx定义的width,同时加上@media(min-width: 768px)等定义的.col-sm-xx来实现当viewport size大于等于sm,md,lg,xl的值时,应该怎样来layout. 如果你不希望在mobile和pc上展示的Layout不一样的话,在使用bootstrap的前提下,你可以使用的一个方法就是全部使用.col-xs-xx来定义layout,这样无论是大屏幕的pc,还是小屏幕的ipad,iphone,同样的网站至少layout都一样了。
但是这时你可能发现还不是你想要的,因为由于字体大小在mobile下太大,所以导致布局非常难看,能不能在相同比例layout的情况下,对应字体,lign-height等也随着font-size按比例下调呢?
<div class="col-xs-1">.col-xs-1</div>
使用css3中定义的vw,vh,vmin的概念可以帮到你。
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
https://css-tricks.com/viewport-sized-typography/
但是这时你可能发现还不是你想要的,因为由于字体大小在mobile下太大,所以导致布局非常难看,能不能在相同比例layout的情况下,对应字体,lign-height等也随着font-size按比例下调呢?
<div class="col-xs-1">.col-xs-1</div>
使用css3中定义的vw,vh,vmin的概念可以帮到你。
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }
https://css-tricks.com/viewport-sized-typography/
相关文章推荐
- Python运维三十六式:用Python写一个简单的监控系统
- 函数和原型
- NIO学习系列笔记(1)
- 解决ie和其他浏览器poi下载excel文件名乱码
- 自己动手写一个web框架(一):实现IOC与MVC
- iOS开发之集成支付宝
- ADB shell出现error:device offline提示
- pgrouting最短路径
- 关系数据库 加 AsyncTask
- HTML 5 Canvas应用场景
- Split分隔字符串几种方式
- 转:js数据类型判断和数组判断
- Resharper的使用
- js var变量Unknown判断
- 函数和原型
- 我们来谈谈Android回调.
- hdu2027
- BPMN2.0-概要
- 通过HttpModule控制功能权限与异常处理
- 一维码和二维码