自适应网页里,字体大小如何自适应屏幕
2016-05-23 16:56
316 查看
字体大小使用 em, rem 作为单位,然后使用 media query 来调整 html 元素的 font-size
自适应网站
html {font-size: 62.5%!important; /* 10÷16=62.5% */}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20÷16=125% */
}
}
app
@media only screen and (min-width: 320px){html {font-size: 62.5%!important;}}
@media only screen and (min-width: 360px){html {font-size: 72.5%!important;}}
@media only screen and (min-width: 400px){html {font-size: 82.5%!important;}}
@media only screen and (min-width: 480px){html {font-size: 94%!important;}}
自适应网站
html {font-size: 62.5%!important; /* 10÷16=62.5% */}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20÷16=125% */
}
}
app
@media only screen and (min-width: 320px){html {font-size: 62.5%!important;}}
@media only screen and (min-width: 360px){html {font-size: 72.5%!important;}}
@media only screen and (min-width: 400px){html {font-size: 82.5%!important;}}
@media only screen and (min-width: 480px){html {font-size: 94%!important;}}
相关文章推荐
- 环信IM集成 —— 聊天界面URL颜色展示
- 如何查看 JAR 包的源代码
- POJ 2349 Arctic Network【中文版题目】【最小生成树+思维】
- Shell 命令 find 的常见用法
- ViewPager实现轮播广告栏(BannerPager)
- VS快捷键大全
- Java面向对象编程 第一章 面向对象开发方法概述
- ArchLinux折腾记
- Mac 上使用Wireshark 抓包
- 以SP方式存储用户名
- redis on windows
- angularjs 实现国际化
- Java网络编程基础(四)---基于TCP的简单聊天系统
- ServletConfig对象
- 随机森林、EM、HMM、LDA
- window.location
- ASP.NET将文件写到另一服务器
- Java面向对象 第一章 面向对象开发方法概述
- iOS学习之——UIStoryboard
- Linux-Shell脚本的运行方式