web移动端CSS使用rem单位设置font-size自适应
2016-03-03 11:33
639 查看
:root {
font-size: 16px;
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
:root {
font-size: 18.75px;
}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
:root {
font-size: 20.7px;
}
}
@media screen and (min-width: 414px) {
:root {
font-size: 20.7px;
}
}
or
font-size: 16px;
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
:root {
font-size: 18.75px;
}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
:root {
font-size: 20.7px;
}
}
@media screen and (min-width: 414px) {
:root {
font-size: 20.7px;
}
}
or
html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}}
相关文章推荐
- Android SQLite (四 ) 全面详解(二)
- Swift2.0(17)泛型技术
- Android清单文件具体解释(三)----应用程序的根节点<application>
- Swift2.0(17)内存管理ARC
- Android SQLite (三 ) 全面详解(一)
- Swift2.0(16)分类与协议
- Swift2.0(15)类型的补充
- iOS didReceiveMemoryWarning 的处理
- iOS开发学习_OC基础_(一).类、对象和方法(1)
- umeng分享到QQ,分享成功,回调失败。
- Swift2.0(14)引用类型与数值类型
- Android开发Can't create handler inside thread that has not called Looper.prepare()
- iOS- "unacceptable content-type: text/plain"等content-type bug解决方案
- Swift2.0(13)构造方法
- Android <shape />的使用
- iOS开发--根据label内容动态设定label大小
- Swift2.0(12)继承与多态
- Swift2.0(11)对象基础
- Swift 笔记(十)
- iOS拨打电话方法(3种)