移动端web开发相关操作

rem移动适配

@media (width: 375px) {
    html {
        font-size: 32px;
    }
}

目前rem布局方案中，将网页等分为10份，HTML标签的字号为视口宽度的十分之一

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

Less

Less是一个CSS预处理器，文件后缀为.less，它扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。不过浏览器不识别Less代码，网页要引入对应的CSS文件。

在vscode中安装上图的插件可以让less文件保存自动生成css文件。

Less语法

1.实现快捷计算效果

2.嵌套生成后代选择器

&符号不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用。

3.用Less变量设置属性值

vw/vh

vh与vw类似

千万不要vw和vh混用，可能会导致盒子变形

vw/vh相对于rem的优势：不需要媒体查询，省去了对于html文字大小的判断和修改

响应式网页

用一套代码实现在不同屏幕大小的设备上正常显示

媒体查询

根据设备宽度的变化，设置差异化样式

注意书写顺序：min-width（从小到大）、max-width（从大到小）

外联式CSS引入

BootStrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

利用BootStrap为我们提供的框架，我们可以仅仅引入css，然后使用特定的类名，再对直接的代码进行修改就能实现目标操作。

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网/

使用步骤：

1.引入：BootStrap提供的CSS代码

2.调用：BootStrap提供的样式

3.修改：复制特定结构后根据自己的需求进行修改

BootStrap中有表格，下拉菜单，字体图标，按钮等实用的样式