浅谈css3长度单位rem，以及移动端布局技巧

rem是什么？

rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。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单位是根据父元素的字体大小来进行转变的单位。

em的值并不是固定的；
em会继承父级元素的字体大小。

父节点
例：

<header style="font-size:100px;">//父元素的字体大小是100px<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>

移动端页面开发技巧：

先调查用户的使用情况，总结出大部分用户使用的都是什么设备。
比如：我现在的用户大多使用的是三种手机，我们先将每种手机的分辨率都从网上找出来。

将他们都罗列出来，然后去写媒体查询（因为不同手机分辨率不同，所以用像素的话，会出现显示的相同，举个栗子~ 比如说小朋友吃饭，食堂给小朋友的标配是一个馒头，可是有的小朋友饭量大，有的饭量小，所以会出现不够吃或者吃不了造成浪费。怎么避免这种情况呢，所以食堂大妈想了一个主意体重在50斤~60斤的小盆友可以领取到一个馒头，低于50斤的半个馒头，体重大于60斤的，两个馒头，这三种分配方式。）

我的用户群体大概是这三种设备
设备名称分辨率估算字体大小 rem与px转换
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*736 font-size：16px； 1rem=16px

先取出一个中间的设备来做基本样式的书写
最开始的书写可以根据设计图纸来进行px的书写（也就是先选择好馒头的大小）
优先写出一套模版，然后基于这套模版去写别的设备的媒体查询

在页面中优先写出媒体查询的标签

    <meta name="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;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
@media screen and (max-width:320px ) {html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {html{font-size: 14px;}
}
@media screen and (min-width:751px ) {html{font-size: 16px;}
}

因为上面写好了一套初始模版，因为初始模版都是px的，在文章的开端我们就强调了为什么不能用px了，所以我们要将页面中的px转换成相应的rem值

例：

header{width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}

所有用px的高宽全部改成rem这样就完成了，对三种设备的适配

转载于:https://www.cnblogs.com/ysshuai/p/6694339.html

浅谈css3长度单位rem，以及移动端布局技巧相关推荐

浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
java中display中的属性_浅谈CSS3中display属性的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...
浅谈CSS3中的弹性布局
浅谈CSS3中的弹性布局现在的努力,只是为了实现小时候吹过的牛逼一.什么是弹性布局? Flex是Flexible Box的缩写,意为"弹性布局",他为盒模型提供了最大的灵活性. ...
如何利用vw+rem进行移动端布局
前言因为在公司,只有一个前端,在做移动端布局的时候.利用px进行布局,发现,需要进行各种手机的适配. 所以在开发第二版的时候,想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同 ...
浅谈CSS3 响应式布局--Media Queries
CSS3 Media Queries , CSS3媒体查询.使用 @media 查询,你可以针对不同的媒体类型定义不同的样式:也可以针对不同的屏幕尺寸设置不同的样式:当重置浏览器大小的过程中,页面也会 ...
浅谈css3的轮播图
css3实现的轮播图的准备 1:建立一个大的div盒子 2:建立一个专门给图片用的盒子,便于操作 3:以超链接的形式使图片和相对应的数字绑定起来 <div id="dahezi&quo ...
css鼠标拖拉卡顿_浅谈CSS3 动画卡顿解决方案
为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的.但是我们要明确以下几个概念:单线程,主线程和合成线程. 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有 ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
用这几个单位就可以做自适应布局了,尤其是下面的vh,解决了高度不能使用百分比的问题,很爽. 另外,自适应除去用下面这些单位之外,还可以用width的一些新属性,fill-available.fit-c ...

浅谈css3长度单位rem，以及移动端布局技巧

浅谈css3长度单位rem，以及移动端布局技巧相关推荐

最新文章

热门文章