移动Web -10 移动适配方案

一. rem和em的区别

em

是一个相对单位,相对于父级的字体大小,优先相当于自己的字体大小来决定

1em=一个字的大小 1默认是16px 20em=20*16=320

rem

是一个相对单位,相当于html标签的字体大小来决定大小

​ 浏览器默认字体为16px

二.媒体查询

够检测视口的宽度，然后编写差异化的 CSS 样式 ;当某个条件成立, 执行对应的CSS样式

@media (对应屏幕){对应标签css样式}

/* 1.检测屏幕宽度 */

``@media (width:375px) { html {`

/* 2.给html设置宽度 html的字体大小=屏幕的十分之一 */

​ font-size: 37.5px; ​ } `}``

三.flexible的使用

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

四.Less

less 可以帮我们把px单位转换到rem单位。

Less是一个CSS预处理器, Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

1.less注释

单行注释

语法：// 注释内容

快捷键：ctrl + / 块注释

语法：/* 注释内容 */ 快捷键： shift + alt + A

2.less运算

.box{

​ width: 1 + 5px;

​ height: 15 - 5px;

​ padding: 10 * 10px;

​ // 第一种写法 ./ 注意less会报错

​ // margin: 100 ./ 20px;

​ // 第二种写法 （ / ）

​ margin: (100 / 10px);

​ width: (150 / 37.5rem);

}

注意点:

1.运算符之间需要使用空格隔开

2.单位默认以第一个值的单位为准

3.除法运算需要携带()

3.less的选择器

/* 以前后代选择器的写法 */

.box p img {

​ width: 100%;

​ height: 100%;

}

/* less后代选择器写法 选择器之间进行嵌套*/

.box {

​ p {

​ img {

​ width: 100%;

​ height: 100%;

​ }

​ }

}

/* */

/* 以前伪元素和伪类的写法*/

.box a:hover{

​ color: aliceblue;

}

.box:nth-child(1){

​ color: aliceblue;

}

/* less推荐的伪元素和伪类的写法 */

.box{

​ /* &表示的.box*/

​ &:hover{

​ color: aliceblue;

​ a{

​ /* &表示的a 当前表示a标签*/

​ &:hover{

​ color: aliceblue;

​ }

​ }

​ }

}

4.less的变量

/* 变量:

一.定义变量 @变量名

二.使用变量 */

@Background:#fff;

@jizhunzhi:37.5rem;

.box{

​ width: (100 / @jizhunzhi);

​ background-color: @Background;

}

5.less的导入

// less的导入

// 语法:@import '文件的路径'

// 第一种方法:

@import "./04-less的选择器.less";

// 第二种方法

@import url(./05-less的变量.less);

/*注意:

less导入的是对应的less文件而不是css */

6.less的导出

"less.compile": {

​ "out": "../css/"

​ },

7.less禁止导出

// out:false

body{

​ width: 100px;

}