移动Web= --移动适配

一套代码适应所有的屏幕。

所以需要用到相对单位 rem vw

rem是目前主流

vw 一些大厂已经开始应用。

rem单位是相对于HTML标签的字号计算结果

1 rem =1 HTML字号大小

媒体查询书写方式

`@media （媒体特性）｛

选择器｛

css属性

｝

｝`

适配375宽度的手机

`@media （width：375px）｛

html｛

font-size: 20px；

｝

｝`

pc端媒体查询适应案例

rem的移动端适配

使用js插件完成自适应，兼容所有的移动端屏幕

less

嵌套用法

&符号不生成后代选择器，表示直接上级

less导入less

@import url（./）;

@import './';

less导出

// out: ../css/

/*

注意点：

1.css 导出路径，后面一定要写/，如果不写只是普通的文件名，不要分号结尾；

2.less 配置信息，一般要写在第一行

*/

less 禁止导出

//out: false 默认不导出css文件

less 压缩导出

// compress:true

项目搭建流程

新建index后，引入ico如表

引入iconfont字体图标资源css和其他资源文件

新建index.less文件，引入base.less文件后生成css文件夹中的indes.css

引入当前页面的index.css文件

在body里面引入

“<script src="./js/flexible.js"></script>”

这个是手淘移动端适配的JS文件

\