移动web

一、物理像素和逻辑像素

1、物理分辨率 1920 * 1080

• 指的硬件分辨率（物理分辨率 单位是像素点 px ）

• 物理分辨率 1920 表示的就是 1920个像素点 也就是 1920px 像素点就是px 的单位 可以和px 转换

• 但是1px 不一定等于1个物理像素点

• 厂商出厂就设置好的 不能改变（指的屏幕就是1920个物理像素点）

2、逻辑分辨率

• 可以调节的 显示设置中 125% 150% 175% 这些都是 逻辑分辨率

• 125% 作用为了让网页显示的更加的清晰

• 125% == 物理分辨率/1.25 就等于网页的宽度

• 1920 的分辨率 放大125% 的时候 实际网页的宽度是 1520px

• 1520px = 1920个物理像素点 1px = 1.25个物理像素点

• 在分辨率 1920 的上面 放大125%之后 显示的更加清晰的原因

• 100% 的时候 1920 分辨率 网页的宽度就是 1920 px 1px = 1个物理像素点

• 网页的宽度 就是 逻辑分辨率

二、视口

1、视口标签meta

<metaname="viewport"content="width=device-width, initial-scale=1.0 ,user-scalable=0,maximum-scale=1.0 , minimum-scale=1.0">

• 不需要自己写，Vscode自动生成

• 目前主流的 视口的宽度（网页的宽度） = 逻辑分辨率 ===》 理想视口 （不用设置 vscode 默认设置好了）

三、二倍图

• iphone 678 逻辑分辨率 375 img { width 375px } 实际需要原图尺寸多少？ 实际原图尺寸就是 750px （防止图片不失真）

• img { width 375px } 在 iphone678 上面 图片实际是 750个物理像素点

• 2倍图只在移动端

四、移动端css初始化

官方地址：http://necolas.github.io/normalize.css

五、流式布局（百分比布局）

1. 设置宽度为百分比，依据屏幕宽度进行伸缩

2. max-width：最大宽度；min-width：最小宽度

六、flex布局

1、布局原理

• 当父盒子设为flex布局时，子元素的float、clear、verticle-align属性会失效

• 给父盒子写display: flex

• 父元素开启display:flex后，行内元素子元素可以设置宽高

2、父项属性

2.1、flex-direction设置主轴方向

• 默认主轴水平向右，侧轴垂直向下

2.2、justify-content 设置主轴上的子元素的排列方式

2.3、flex-wrap设置子元素是否换行

• 默认不换行，如果装不下，会缩小子元素宽度

2.4、align-items设置侧轴上的子元素的排列方式（单行）

• 使用stretch时，子元素不要给高度

2.5、align-content 设置侧轴上的子元素的排列方式（多行）

• 在单行下无效

2.6、flex-flow复合属性，相当于同时设置flex-direction和flex-wrap

flex-flow:rowwrap;

3、子项属性

3.1、flex子项目占的份数

• 分配父元素的剩余空间

3.2、align-self控制子项自己在侧轴的排列方式

3.3、order属性定义子项的排列顺序

• 默认是0，数值越小，排列越靠前

七、rem适配布局

1、rem相对单位

• em也是相对单位，是父元素的字体大小；

• rem是相对于html元素的字体大小

2、媒体查询

2.1、语法

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

• 检测当前视口（网页的）的宽度

3、rem适配原理

• 把屏幕划分成了 n 份 （n的话可以是任何值, 所有的手机屏幕都是n份） 每一份大小就是 1/n

• 每一份的大小 给了 html 的font-size

• 1rem = 1/n

• 等比例缩放 （只要是使用px 都换算成rem ）

4、flexible.js

• 2 <script src="js/flexible.js"></script> 页面中 任何位置都行

• 3 引入他之后需要我们注意的是 他把屏幕划分成了多少份 ？ 10份

5、less

• css 预处理语言 css 里面不支持 + -* / less支持 + - * /

• 浏览器里面不支持less 通过插件 把less 转换成css

• 注释 单行 // 多行 /* */

• 单行注释能再css里面用吗？ 不能用

• less 中 除法 带一个 () less 中如果有2个单位 以第一个单位为准

• less 推荐写法 （100 / 30） 不推荐 100./30

• 定义变量 存储公共的数据 方便修改 @变量名： 变量值；

• 变量名 随便写 变量值 一般都是css 的属性值

• 导入文件 @import "文件名";

• out : false 不再单独编译成 css

八、响应式开发

1、响应式开发原理

九、Bootstrap开发框架

1、布局容器

• container类：响应式布局，固定宽度

• container-fluid类：流式布局，百分百宽度，占据全部视口，适合单独做移动端开发

2、栅格系统

• container默认带左右15px内边距，

• 行（row）必须放到container布局容器中，row带左右-15px的内边距

• 可以同时为一列指定多个设备的类名，以便划分不同份数

2.1、列嵌套

每列中再加一个行，可以去掉父盒子中的padding，高度和父盒子一样

2.2、列偏移

• 使用.col-md-offset-类可以将列向右偏移

实现两侧贴边：偏移份数=12-两个盒子所占份数

实现盒子居中对齐：偏移份数=（12-盒子所占份数）/ 2

2.3、列排序

使用.col-md-push-类和.col-md-pull-类可以改变列的顺序

2.4、响应式工具