pc端网页宽度大，需要固定版心

移动网页宽度小，100%撑满

分辨率

设备的出厂分辨率（物理分率）

设备使用软件修改（缩小）的分辨率（缩小分辨能起到放大的作用）（逻辑分辨率）

开发时，分辨率参考的都是按比例缩小后的逻辑分辨率（分辨率缩小后容易统一）

pc端的宽度一般是1600px左右，pc端默认viewport是逻辑分辨率

移动端的宽度一般在320-420px之间，移动端默认viewport是980px，需要用meta标签设置成逻辑分辨率，但html框架默认设置了meta标签

设计时，分辨率是参考物理分辨率（为了保证用户看到高清的效果，保证图像不失真），拿到设计稿（psd），在像素大厨中打开开发者模式，把倍数选为x2

宽度写成百分比，高度写固定

可以轻松实现一个大盒子内几个小盒子水平排列的问题适合结构化的布局

而且不会造成父盒子高度塌陷的问题，不需要反复的设置margin

flex-组成：flex由弹性容器、弹性盒子、主轴、交叉轴组成

弹性盒子默认不会换行，超过容器的宽度时会自动挤压，缩小自身的宽度：被称作弹性盒子的原因之一，把容器的flex-wrap属性设置成wrap（缠绕）就能实现换行了

主轴上的盒子们

默认情况下弹性盒子在弹性容器内会按照主轴的方向依次排列

弹性盒子之间的间隔可以通过设置主轴对齐方式来实现

设置主轴的对齐方式使用justify（行对齐 ）-content：

center 居中对齐

space-between 弹性盒子之间有间距

space-around 弹性盒子周围都有间距

space-evenly 所有地方的间距都均分

flex-start 从头（左）开始紧挨着，默认值

flex-end 从未开始紧挨着

交叉轴上的盒子们

交叉轴上子元素对齐的属性是align（对齐）-item：

stretch 伸展（默认，没高度会被拉伸:被称作弹性盒子的原因之二，有高度从头对齐）

center 居中对齐（有没有高度都在中间，不会被拉伸）

flex-end 从未开始对齐

flex-start 从头对齐

交叉轴上针对某一个弹性盒子

使用align-self：

属性值与align-item一样

用flex属性可以设置某个弹性盒子占容器空白部分的份数比例

例如容器宽度是600，设置弹性盒子1的宽度是200，设置弹性盒子2的flex属性值是3，设置弹性盒子3的flex属性值是1，则盒子2和盒子3的宽度分别是300和100

实现元素宽高随设备大小变化而等比例变化，解决百分比布局高度无法自适应的问题

方案：rem方案、vw/vh方案（新）

把所有的尺寸单位都转为rem

rem是一个单位，1rem=1html字体的大小

用媒体查询的方式，给不同的视口添加不同的字体大小

@media（媒体特征width=设备逻辑分辨率）{

css样式

}

开发中默认十分之一的设备尺寸为1html字体的大小（方便统一计算）

如何用rem和媒体查询实现元素的适配

1.确定不同设备下1rem的大小：添加不同逻辑分辨率的媒体查询，取视口宽度px的十分之一作为html字体大小

2.计算出设计稿中元素的rem大小：设计稿的设备尺寸除以十得出1rem设计稿的px大小，设计稿元素的px大小除以1rem的px大小得到，该元素的rem大小

3.给元素设置rem大小，就能适配所有的媒体查询设备了

如果使用以上方式进行移动适配，需要为许多设备一一的添加媒体查询，而且由于开发者电脑的逻辑分辨率的缩放比例不同，需要调整成原始比例才能确保谷歌浏览器的移动设备模拟器的逻辑分辨率和媒体查询的分辨率一致

因此阿里巴巴淘宝团队开发了flexible js文件，将其引入设备中就能，省去为不同设备添加媒体查询的步骤和把电脑缩放比例改成100%的步骤

其次使用less还能省去手动计算元素rem大小的麻烦，用less写样式的话只需要列式即可（例如：元素px大小/视口大小的十分之一 rem）

less是一个css预处理器，更简单的写css，使css具有逻辑性和计算能力，浏览器无法直接识别less文件，要把less转换成css

vscode插件 easy less，保存后自动生成css文件

注意less的除法在4.0版本以后运算有特殊的要求，需要（a/b单位）或a./b单位，加小括号（推荐）或加点

less语法

1.less嵌套语法：

父选择器{

​ 父css样式

​ 子选择器{

​ 子css样式

（&符号可以方便代码的迁移）&：hover{

​ 当前括号选择器的hover伪类选择器的css样式

​ }

​ }

}

css输出效果

父选择器{

​ 父css

}

子选择器{

​ 子css

}

子选择器：hover{

​ 子伪类选择css样式

}

相关技术

2.less变量

定义变量 @变量名：属性值

使用变量 属性：@变量名

好处：方便统一修改某个变量

设置根字号变量，@rootsize:37.5（看设计稿设备）rem;

导入less（多个less文件导入到一个less文件中统一生成一个css文件）

@import ‘./文件路径’（less文件可以不加后缀名）

导出less（为css）到指定文件目录

1.用easy less设置，在vscode中的设置中搜索easy less ，选择setting。。。。，在json文件中添加“less compile（编写）”{ "out":"../css/"}注意文件夹要加/

2.在less文件最前面写

//out:文件夹路径/样式表名称（可加可不加）注意没有引号没有分号

对于那些已经被导入到其他的less文件中的less文件，需要对其禁止导出，以免累赘

//out： flase

vw是视口宽度的100分之一

vh是视口高度的100分之一

使用时直接将元素的px大小/视口宽度（高度）的100分之一 就能换算成vw或vh单位

注意vw和vh不要混用，要统一单位，否则对于宽高比例不同的设备无法做到适配

可以针对不同宽度的设备，提供不同的布局方案

利用css的层叠效果和min-width、max-width限定媒体查询的条件可以实现响应式布局的效果

设置max-width，即限定了小于某个宽度的媒体

设置min-width，即限定了大于某个宽度的媒体

由于css层叠样式后面会覆盖前面的特性，只需要从小到大的书写限定的宽度就能实现区间效果

1.媒体查询以属性的方式写在link标签中就能在不同的限定条件下限定不同的样式表实现响应式布局的效果

2.或者直接写一个媒体查询在css中，当媒体的宽度小于某个大小时就隐藏掉一些元素（设置display为none）也能实现响应式布局的效果

使用bootstrap中的栅格系统高效实现响应式开发

栅格系统将网页分成12份

对宽度为超小（xs768px）、中（md>992px）、大（lg>1200px）四种设备范围下的元素指定其占页面的份数

使用方式

给元素加类名 col-xs（sm、md、lg）-数字（1-12）

col表示使用栅格布局，xs-lg表示该元素在某个尺寸下的状态，1-12表示该元素在这一尺寸下占12份视口宽度的几份

使用栅格系统实际上就是引入写好的类，给需要添加布局的元素加上预设好的对应的类名

栅格系统的原理是使用浮动的方式让元素在一排排列，并给元素添加对应的百分比，属于百分比布局

系统中的container类，让元素产生版心效果，而且内部有15px的左右padding，给内部元素套多一个类名为row的类可以抵消掉这种效果

全局css样式

给元素（特定标签）加类名，得到对应的样式

要先加基本样式再加特殊样式

例如先加.btn再加.btn-success

组件

只有样子，没有交互效果

1.一些封装好的有精美样式的html区域

例如，下拉菜单、路径标签

直接复制代码块到html文件即可，可按需修改（改名字、加元素等）

2.字体图标

给i标签或其他标签，添加图标的类名即可

JavaScript插件

有样式有功能的常用精美html区域

使用方法

先引入jQuery.js文件

再引入bootstrap的js文件

复制想要添加的功能模块到html中，再根据需求进行修改

例如，下拉列表、轮播图（Carousel）等

定制

内容少、企业官网可以做响应式的网站

内容多、电商网站不能做响应式网站，要分成pc端（小兔鲜，可以媒体查询隐藏部分内容）和移动端（游乐园，移动适配两种方案）两个网站开发