您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“怎么理解CSS中的rem及移动端的布局方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么理解CSS中的rem及移动端的布局方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
一、rem是什么？
rem是css3中新增加的一个单位属性(fontsizeoftherootelement),根据页面的根节点的字体大小进行转变的单位。root！！！！！！！！！根节点，也就是html。
例：(下面例子中的根节点是html，它的字体大小是100px，所以根节点下面的元素所设置的rem，都是1rem=100px。)
rem的初始值是16px，也就是说在没有设置根节点的font-size的时候，1rem=16px
<html>
<head>
<style>
html,body{font-size:100px;}
header{height:1rem;width:1rem;}
</style>
</head>
<body></body>
<header></header>
</html>
二、em是什么
em也是一个相对单位，em单位是根据父元素的字体大小来进行转变的单位。
1、em的值并不是固定的；
2、em会继承父级元素的字体大小。
父节点
例：
<headerstyle="font-size:100px;">//父元素的字体大小是100px
<divstyle="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>
三、移动端页面开发技巧：
先调查用户的使用情况，总结出大部分用户使用的都是什么设备。
比如：我现在的用户大多使用的是三种手机，我们先将每种手机的分辨率都从网上找出来。
将他们都罗列出来，然后去写媒体查询（因为不同手机分辨率不同，所以用像素的话，会出现显示的相同，举个栗子~比如说小朋友吃饭，食堂给小朋友的标配是一个馒头，可是有的小朋友饭量大，有的饭量小，所以会出现不够吃或者吃不了造成浪费。怎么避免这种情况呢，所以食堂大妈想了一个主意体重在50斤~60斤的小盆友可以领取到一个馒头，低于50斤的半个馒头，体重大于60斤的，两个馒头，这三种分配方式。）
我的用户群体大概是这三种设备
设备名称分辨率估算字体大小rem与px转换
iphone5320568font-size：12px；1rem=12px
iphone6375667font-size：14px；1rem=14px
iphone6Plus414*736font-size：16px；1rem=16px
先取出一个中间的设备来做基本样式的书写
最开始的书写可以根据设计图纸来进行px的书写（也就是先选择好馒头的大小）
优先写出一套模版，然后基于这套模版去写别的设备的媒体查询
在页面中优先写出媒体查询的标签
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
width-viewport设备的宽度
height-viewport设备的高度
initial-scale-初始的缩放比例
minimum-scale-允许用户缩放到的最小比例
maximum-scale-允许用户缩放到的最大比例
user-scalable-用户是否可以手动缩放
上面分配好了，按照这种方式写媒体查询
html,body{height:100%;margin:0;padding:0;font-size:14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
@mediascreenand(max-width:320px){
html{font-size:12px;}
}
@mediascreenand(min-width:321px)and(max-width:750px){
html{font-size:14px;}
}
@mediascreenand(min-width:751px){
html{font-size:16px;}
}
因为上面写好了一套初始模版，因为初始模版都是px的，在文章的开端我们就强调了为什么不能用px了，所以我们要将页面中的px转换成相应的rem值
例：
header{
width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}
所有用px的高宽全部改成rem这样就完成了，对三种设备的适配。
读到这里，这篇“怎么理解CSS中的rem及移动端的布局方法”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。