CSS中的rem和移动端的布局方法-创新互联

今天小编给大家分享的是CSS中的rem和移动端的布局方法的详细介绍,相信很多人都不太了解,为了让大家更加了解,给大家总结了以下内容,话不多说,一起往下看吧。

成都创新互联公司专注于霍林郭勒企业网站建设,成都响应式网站建设公司,商城网站建设。霍林郭勒网站建设公司,为霍林郭勒等地区提供建站服务。全流程按需求定制开发,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

一、rem是什么?

rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。root!!!!!!!!!根节点,也就是html。

例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素所设置的rem,都是1rem=100px。)
rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px


    
        
    
    
    

二、em是什么

em也是一个相对单位,em单位是根据父元素的字体大小来进行转变的单位。
1、em的值并不是固定的;
2、em会继承父级元素的字体大小。

父节点
例:

//父元素的字体大小是100px
//所以子元素的em是1em=100px;

三、移动端页面开发技巧:

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

将他们都罗列出来,然后去写媒体查询(因为不同手机分辨率不同,所以用像素的话,会出现显示的相同,举个栗子~ 比如说小朋友吃饭,食堂给小朋友的标配是一个馒头,可是有的小朋友饭量大,有的饭量小,所以会出现不够吃或者吃不了造成浪费。怎么避免这种情况呢,所以食堂大妈想了一个主意体重在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的书写(也就是先选择好馒头的大小)
优先写出一套模版,然后基于这套模版去写别的设备的媒体查询

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

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这样就完成了,对三种设备的适配。

以上就是CSS中的rem和移动端的布局方法的简略介绍,详细使用情况还需要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联网站制作公司行业资讯频道!


网站栏目:CSS中的rem和移动端的布局方法-创新互联
网页网址:http://pwwzsj.com/article/jicej.html