移动端页面字体——rem的使用
2024-09-07 03:14:48
浏览器的默认字体高是16px。
- 兼容性：
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
对于不支持的浏览器，要多写一个绝对单位的声明，这样浏览器就会忽略用rem设定的字体大小。
- %
css中的body先全局声明font-size=62.5%，%的算法和rem一样。
因为16px=100%，1px=6.25%，所以10px=62.5%。
1rem=10px，所以12px=1.2rem。px与rem的转换倍率是10，很方便。
- 使用方法
rem是相对于根元素html的font-size，所以设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。
一般情况下，这样使用：
html{font-size:62.5%;}
body{
font-size:12px;
font-size:1.2rem ; /* 为兼容不支持rem的浏览器，要在rem前写上对应的px值，不支持的浏览器可以优雅降级 */
}
p{
font-size:14px;
font-size:1.4rem;
}
- 优点
其他元素字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法：
@media only screen and (min-width: 320px){
html {
font-size: 62.5% !important;
}
}
@media only screen and (min-width: 640px){
html {
font-size: 125% !important;
}
}
@media only screen and (min-width: 750px){
html {
font-size: 150% !important;
}
}
@media only screen and (min-width: 1242px){
html {
font-size: 187.5% !important;
}
}
这样就可以仅改变html的字体大小，其他字体具有“响应式”。。。
刚刚忘记写了，之前有看到使用em设置字体大小的，不过比较而言， rem比em要方便多了，因为em 的计算是基于父级元素的，在实际使用中给计算带来了很大的不便。而rem不用担心父级元素的 font-size，可以放心使用。
附加：：：：：：：：：：：
谈rem不谈base font毫无意义，谈base font不谈屏幕尺寸也毫无意义。
/*手机端的标准字体大小为16px*/
html {
font-size: 16px;
} @media only screen and (min-width : 320px) { } /*当屏幕宽度大于480像素时，将采用以下字体大小为标准大小，下同*/
@media only screen and (min-width : 480px) {
html {
font-size: 18px;
}
} @media only screen and (min-width : 768px) {
html {
font-size: 20px;
}
} @media only screen and (min-width : 992px) {
html {
font-size: 20px;
}
} @media only screen and (min-width : 1200px) {
html {
font-size: 22px;
}
}
这里所设置的字体大小不会影响到你的任何直接定义为px的字体大小，这里的字体大小只有在一种情况下发生作用，那就是使用rem的时候。
注意：调的时候的顺序要搞清，不要两边来回乱调，一定要手机优先，先在小屏幕上用px确保字体显示正常了，再放到大屏幕上看，如果哪块需要放大字体，再回到小屏幕上，改写为rem，然后再放到大屏上看。
最新文章
- .NET工程师技术进阶
- 自定义JSP标签库及Properties使用
- pfile 与 spfile
- sql主键的一点重要理解
- FileReader乱码
- Centos 安装KScope1.6.2
- Android：布局实例之常见用户设置界面
- 关于call 与 apply 那些事
- 一起来写2048(160行python代码)
- 为什么选择Premium Fabric Shanghai
- js深入研究之牛逼的类封装设计
- 【整理】Object-C中的属性(Property)的Setter：assign,copy,retain,weak,strong之间的区别和联系
- MySQL的NULL值处理
- easyUI parser的使用
- Android系统--输入系统（十三）Dispatcher线程情景分析_Reader线程传递事件
- maven的安装教程
- html 超链接标签 锚点 a标签伪类
- Cross-Origin跨域问题
- Python psutil模块使用
- Linux分区的几种方案