移动端Web开发rem适配布局

本周总结：

1、rem单位介绍

2、媒体查询

3、less基础

4、rem适配方案

一、rem单位介绍

rem (root em)是一个相对单位,类似于em,em是父元素字体大小，而rem基准于HTML元素的字体大

小。

优点：可以通过修改HTML里面的文字大小改变页面中元素大小。可以使整体得到控制。

二、媒体查询

2.1媒体查询概念：

媒体查询( Media Query)是CSS3新语法。可以针对不同的媒体类型定义不同的样式，可以针

对不同的屏幕尺寸设置不同的样式。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。比如平板，手机

等。

2.2媒体查询语法规范：

@media mediatype and|not|only (media feature){

CSS-Code;

}

语法注意：

• 用@media开头注意@符号        
• mediatype媒体类型     

  值	解释
  all	用于所有设备
  print	用于打印机和打印预览
  screen	用于电脑屏幕, 平板电脑, 智能手机等

• 关键字 and not only

  值	解释
  and	可以将多个媒体特性连接到一起,相当于且”的意思
  not	排除某个媒体类型,相当于“非”的意思,可以省略。
  only	指定某个特定的媒体类型,可以省略。

• media feature媒体特性必须有小括号包含。

        每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

​
	@media screen and (max-width: 800px){
				html {
					font-size:12px;
				}
			}

​

意思是:在屏幕上并且最大宽度是800px时设置想要的样式：字体大小12px.

2.3媒体查询+rem元素实现元素动态变化

有了rem页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式。

媒体查询+rem就可以实现不同设备宽度,现页面元素大小的动态变化。

2.4引入资源：

当样式比较繁多的时候,我们可以针对不同的媒体使用不同 stylesheets(样式表)原理,就是直接在link

中判断设备的尺寸,然后引用不同的css文件

 <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

为了防止混乱，媒体查询时要按照从小到大或者从大到小的顺序来写，代码更简洁。

三、less基础

3.1 less介绍：
CSS是一门非程序式语言，没有变量，函数，作用域等概念
CSS需要书写大量代码，冗余度较高
不方便维护及扩展，不利于复用
CSS没有很好的计算能力
less是一门CSS扩展语言，也称为CSS预处理器(less,sass,stylus)
在CSS的基础上，为CSS加入程序式语言的特征

3.2 less编译：

VScode中安装插件Easy less会自动将less文件解析成CSS文件。

3.3 less嵌套：

子元素的样式直接写到父元素中,会自动解析成CSS文件

3.4less变量：
@变量名：值；
变量名必须以@开头 不能包含特殊字符 不能以数字开头 大小写敏感。
 

@base: #f938ab;/*定义变量*/
.box {
  color: @base;
  border-color: lighten(@base, 30%); /*使用函数*/
  /*嵌套*/
  .content{
    width:100%;
  }
  .title{
    color:#ccc;
  }
}

解析成CSS文件： 

.box {
  color: #f938ab;
  border-color: #fdcdea;
}
.box .content {
  width: 100%;
}
.box .title {
  color: #ccc;
}

3.5如果遇见（交集、伪类、伪元素选择器）

.内层选择器的前面没有&符号，则被解析为父选择器后代

.如果有&符号，他就被解析为父元素自身或父元素的伪类。

#header {
  color: black;
 
  &:hover{
    color:#ccc;
  }
}

解析成：

#header {
  color: black;
}
#header:hover {
  color: #ccc;
}

3.6less运算：

任何数字、颜色或者变量都可以参与运算。

1运算符左右必须要有空格。

2两个数参与运算，如果一个有单位，那么结果单位以这个单位为准。

3两个数参与运算，如果两个都有单位，那么结果单位以第一个单位为准。

四、rem适配方案

1、设计搞常见的尺寸宽度 

2、动态设置 html 标签 font-size 大小

• 假设设计稿是750px
• 假设我们把整个屏幕划分为15等分（划分标准不一可以是20等份也可以是10等份）
• 每一份作为html字体大小，这里就是50px
• 那么在320px设备的时候，字体大小为320/15 就是21.33px
• 用我们页面元素的大小  除以不同的 html 字体大小会发现他们比例还是相同的
• 比如我们以750 为标准设计稿
• 一个100*100像素的页面元素在 750屏幕下，就是 100  /  50转换为rem 是 2rem * 2rem 比例是1比1
• 320屏幕下，html字体大小就为 21.33 则2rem = 42.66px, 此时宽和高 都是42.66， 但是高和宽还是1比1
• 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果

3、元素大小取值方法

• 最后的公式：页面元素的rem值 = 页面元素值（px） /  (屏幕宽度 /  划分的份数)
• 屏幕的宽度 / 划分的份数就是 html font-size 的大小
• 或者：页面元素的rem值 =  页面元素值 （px） /  html font-size 字体大小