移动web开发_rem布局小记

移动web开发_rem布局小记

---

---

前言

移动web开发之rem适配布局，本文记录了两种前端开发rem适配布局方案

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、rem是什么？

rem (root em)是一个相对单位，相对于html元素的字体大小。
比如，根元素（html）设置font-size=14px; 非根元素设置width:2rem; 则换成px表示就是28px。

html{
	font-size = 14px;  /* 1rem = 14px */
}

div {
	width:2rem;  /* 宽度为2个rem 即28px */
}

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

二、rem实际开发适配方案

开发原理

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

方案一： rem + 媒体查询 + less

媒体查询

媒体查询（Media Query）是CSS3新语法。

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
/*
mediatype查询类型： all    用于所有设备
				   print  用于打印机和打印预览
				   screen 用于电脑屏幕，平板电脑，智能手机等
          
          关键字:  and |  not  | only 
		  
 媒体特性（常用）：    width   定义输出设备中页面可见区域的宽度
 				 min-width   定义输出设备中页面最小可见区域的宽度
 				 max-width   定义输出设备中页面最大可见区域的宽度
*/

示例：

/* 屏幕宽度小于750px时  页面背景色为pink色 */
@media screen and (max-width:749px){
 body {
 	 background-color: pink;
  }
}

/* 屏幕宽度大于等于750px时  页面背景色为blue色 */
@media screen and (min-width:750px){
  body {
    background-color: blue;
  }
  
}
/* 建议从小到大书写，简洁代码，防止混乱， */

Less基础

Less简介

Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。
常见的CSS预处理器：Sass、Less、Stylus

• Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器

• 做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

• 它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

• Less中文网址：http://lesscss.cn/

Less的使用

1、Less变量

@变量名:值;

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

/* @变量名：值； */
 /* 定义变量 */
@color: pink;
@width: 50px;

 /* 引用变量 */
div {
	 background-color: @color;   /* 颜色为pink色 */
	 width: @width;   /* 宽度为50px*/
}

开发中一些颜色和数值会经常用到，我们将这些数值用变量定义好之后引用，如若之后数值需要更改，只需要更改变量定义值即可，就不用每个地方都去更改了。

2、Less嵌套

less文件中可以直接在父级样式中直接接着书写子级样式

// less文件中

header {
	width: 500px;
    .logo {
       width: 300px;
    }
}

/* css文件中 */
header {
	width:500px;
}
header .logo {
  width: 300px;
}

如果遇见 （交集|伪类|伪元素选择器） 则利用&进行连接

//less 文件中
a{
  &:hover{
      color:red;
  }
}

/* css文件中 */
a:hover{
    color:red;
}

3、Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

//Less 里面写
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}

/*生成的css*/
div {
  border: 15px solid red;
}
//Less 甚至还可以这样 
width: (@width + 5) * 2;

目前less文件中的除法随着版本更新，需要用小括号括起来才会进行除法运算,编程时需要注意

@w:50px;
div {
	width: (@w / 2);
	height: (100px / @w);
}

方案一实现

①页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

例如：
划分份数定为15份
750px屏幕下
rem=750 / 15 = 50px
320px屏幕下
rem=320 / 15 = 21.33px
用媒体查询规定不同屏幕下的rem值
书写页面元素样式时，用rem作为尺寸单位，随着屏幕宽度改变，rem改变，元素的大小也随rem值的改变而改变，从而实现不同屏幕宽度等比例缩放。

// less文件中利用媒体查询设置常见的屏幕尺寸，修改里面的html文字大小
// pc端 层叠性 写到最上面
html {
    font-size: 50px;
}
// 定义划分份数为 15
@no: 15;
// 320  
@media screen and (min-width:320px) {
   html {
    font-size:( 320px / @no) ;
   }   
}
// 360
@media screen and (min-width:360px) {
   html {
    font-size: (360px / @no) ;
   }   
}
// 375  iphone 678
@media screen and (min-width:375px) {
   html {
    font-size: (375px / @no) ;
   }    
}
// 384
@media screen and (min-width:384px) {
    html {
        font-size: (384px / @no) ;
    }  
}
// 400
@media screen and (min-width:400px) {
    html {
        font-size: (400px / @no) ;
    }   
}
// 414
@media screen and (min-width:414px) {
    html {
        font-size: (414px / @no) ;
    } 
}
// 424
@media screen and (min-width:424px) {
   html {
    font-size: (424px / @no) ;
   }  
}
// 480
@media screen and (min-width:480px) {
    html {
        font-size: (480px / @no) ;
    }   
}
// 540
@media screen and (min-width:540px) {
   html {
    font-size: (540px / @no) ;
   }  
}
// 720
@media screen and (min-width:720px) {
    html {
        font-size: (720px / @no) ;
    }
    
}
// 750
@media screen and (min-width:750px) {
    html {
        font-size: (750px / @no) ;
    }
    
}

---

方案二：flexible.js + rem

手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询（就是上文一大串的代码），因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
只需要确定好我们当前设备的html 文字大小剩余的，让flexible.js来去算

比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以

html{
	font-size:75px!important;
}

<!-- 引入flexible.js 文件 -->
    <script src="js/flexible.js"></script>

github地址：https://github.com/amfe/lib-flexible

---

总结

rem就是一个单位值,可以帮助我们解决不同屏幕宽度下元素大小等比例显示的问题.本文简单介绍了2种rem的适配方案,实际开发中可按需选择.