rem适配布局

1.rem基础

1.rem(root em)是一个相对单位,类似于em,em是父元素字体大小

2.不同的是rem的基准相对于html元素字体大小

3.rem的优点:通过修改html里面文字大小来改变页面重元素的大小可以整体控制

2.媒体查询

2.1.什么是媒体查询

2.1.1媒体查询(media query) 是css新语法

2.2媒体查询的优点:

2.2.2@media可以针对不同的屏幕尺寸设置不同的样式

2.3语法规范

 @media mediatype and | not | only (media feature) {css-code;}

2.3.1注意点 :

用@media开头  ,注意不要少了@符号

mediatype  媒体类型

关键字   and   not   only 

media feature  媒体特性  必须要有小括号括起来

2.4mediatype 查询类型

说明:将不同的终端忽而分成不同的类型,称之为媒体类型

2.4.1常见的属性值及其说明

值                           说明

all                        适用于所有设备

print                    适用于打印机,打印预览

screen                 适用于平板电脑,电脑屏幕,智能手机等

2.5关键字

 说明:关键字将媒体类型或多个媒体类型连接到一起为媒体查询的条件

2.5.1常见的属性值及其说明

值                           说明

and                        可以将多个媒体特性连接到一起,相当于'且'的意思

not                         排除某个媒体类型,相当于'非'的意思,可省略

only                        指定某个特定的媒体类型,可以省略

2.6媒体特性

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

注意:需要加小括号包涵 

2.6.1常见属性及其说明

值                                  说明

width                           定义输出设备中页面可见区域宽度

min-width                   定义输出设备中页面最小可见区域宽度

max-width                  定义输出设备中页面最大可见区域宽度

 2.7引入资源(了解)

说明:当样式比较繁多的时候,我们可以针对不同媒体使用stylesheets(样式表)

原理:就是直接在link中判断设备的尺寸,然后引入不同的css文件

3.less基础

3.1维护css的弊端

3.1.1css是一门非程序式语言,没有变量,函数,scope(作用域)等概念

3.1.2css需要书写大量看似没有逻辑的代码,css冗余度是比较高的

3.1.3css不方便维护及扩展,不利于复用

3.1.4css没有很好的计算能力

3.2less介绍

3.2.1 less(leaner style sheet 的缩写) 是一门css扩展语言,也称之为css预处理器

3.2.2作为css一种形式的扩展,他并没有减少css的功能,而是在原有css语法上,加入css程序式语言特性

3.2.3他在css基础上引入了变量,mixin(混入),运算及函数等功能,大大简化了css缩写,并且降低了css的维护成本

3.2.4常见的css预处理器 sass   less   stylus

3.2.5总结:less是一门css预处理器语言,它扩展了css动态特性

3.3less使用

3.3.1首先新建一个后缀名为less的文件,在这个less文件里面书写less语句

3.3.2less变量

说明:变量是之没有固定的值,可以改变的,因为我们css中的一些颜色和数值经常使用

3.3.3变量命名规范

1.必须以@为前缀

2.不能包涵特殊字符

3.不能以数字开头

4.大小写注意区分

3.3.4less编辑

1. 本质上,less包含了一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,最终通过解析器,编译成对应的css文件

2.vscode less插件

用easy less插件用来把less文件编译成css文件

3.3.5less嵌套

1.less嵌套:子元素直接写到父元素里面

2.如果有伪类,交集选择器,伪元素选择器,我们内层选择器前面需要加&符号

3.3.6less运算

说明:任何数字,颜色或者变量都可以参与运算. less提供了加(+) 减(-) 乘(*) 除(/)

注意点:

1.注意加减符号

2.我们运算符左右两侧必需要有一个空格 

3.两个数参与运算,如果一个有单位,最后的结果就以这个单位为准

4.两个数参与运算,如果两个数都有单位,而且单位不一样,最后的结果以第一个为准

4.rem适配方案

4.1.rem实际开发方案

1.按照设计稿设备宽度比例,动态计算设置html根标签font-size字体大小(媒体查询)

2.css中,设计稿元素的宽,高,相对位置的取值,按照同等比例大小换算为rem单位

4.2rem适配方案

1.技术方案一
less+媒体查询+rem

2.技术方案二(推荐)

 flexible.js+rem

总结:两种方案都存在,方案二更简单