响应式网页:用em,rem设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?
IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。
em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。
比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)
当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:
html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}
需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。
响应式网页:用em,rem设置网页字体大小自适应的更多相关文章
- rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题
rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...
- 安卓下设置系统字体大小影响H5页面布局
问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...
- 设置MyEclipse字体大小
设置MyEclipse字体大小
- [Android] 字体使用dp单位避免设置系统字体大小对排版的影响
[Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高 ...
- Android系统移植与调试之------->如何修改Android默认字体大小和设置里面字体大小比例
因为我修改 ro.sf.lcd_density的值,将它从160修改 为120,所以导致整个系统的字体都变得很小.因此需要将整个字体变大,并且在设置-->显示-->字体大小的4个选项的值都 ...
- [转]响应式网页设计:rem、em设置网页字体大小自适应
本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...
- 响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
- rem设置网页字体大小
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
- rem的基准字体大小的设置
1.移动端 UI 给的设计稿通常是640px.720px.750px的宽度,但是我们要做适配,兼容不同的终端,rem布局是比较常用的一种方式,比较关键的是确定根节点的字体大小. 这里以640px为例, ...
随机推荐
- 性能测试四十六:Linux 从网卡模拟延时和丢包的实现
Linux 中模拟延时和丢包的实现 使用ifconfig命令查看网卡 Linux 中使用 tc 进行流量管理.具体命令的使用参考 tc 的 man 手册,这里简单记录一下使用 tc 模拟延时和丢包的命 ...
- Command 'ifconfig' not found, but can be installed with: sudo apt install net-tools
然后按照错误信息安安装网络工具: sudo apt install net-tools shl@shl-tx:~$ sudo apt install net-tools正在读取软件包列表... 完成正 ...
- hive sql常用整理-hive引擎设置
遇到个情况,跑hive级联insert数据报错,可以尝试换个hive计算引擎 hive遇到FAILED: Execution Error, return code 2 from org.apache. ...
- Nginx配置TCP请求转发
Nginx配置TCP请求转发 1.TCP请求转发基于stream在1.9版本前,需要单独编译安装该组建: # 依赖服务 [root@baolin conf]#yum -y install pcre-d ...
- Ubuntu16.04安装vim8
Ubuntu16.04安装vim8 在Ubuntu16.04下编译安装vim8,并配置vim-plug插件管理器,以及安装YouCompleteMe等插件. 安装依赖 sudo apt-get ins ...
- 简单有效:解决 Excel 打开 UTF-8 编码 CSV 文件乱码的 BUG
https://blog.csdn.net/Sukie_csdn/article/details/78752969
- C#学习-静态
有提过类的成员,有字段.属性.方法和构造函数等,也可以使用static关键字将其声明为类的静态成员. 静态成员属于类级别的概念,它不属于类的实例. 可以使用static关键字来声明静态字段,静态字段与 ...
- java.lang.OutOfMemoryError: unable to create new native thread
ps -o nlwp 70753 sudo -u tomcat jmap -dump:format=b,file=fundmarketmanage.hprof 78894
- 自定义rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二种掌握的排序Q-Q
#include<stdio.h> int main() { int s[10000]={0}; int i=0,j=0,n=0,x=0; scanf(" ...