移动web

5.移动端屏幕知识

1、逻辑分辨率

是由软件（驱动）决定的

2、设备分辨率

是生产屏幕时就固定的，它是不可被改变的

3、注意

制作网页参考逻辑分辨率

4、布局视口

目标

• 使用meta标签设置视口宽度，制作适配不同设备宽度的网页

• 手机屏幕尺寸都不同， 网页宽度为100%

• 网页的宽度和逻辑分辨率尺寸相同。

属性

• viewport：视口
• width=device-width：视口宽度 = 设备宽度
• initial-scale=1.0：缩放1倍（不缩放）

5、二倍图

目标：

• 能够使用像素大厨软件测量二倍图中元素的尺寸
• 图片分辨率, 为了高分辨率下图片不会模糊失真
• 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
• 二倍图设计稿尺寸：750px。

6.百分比布局

目标：

• 能够使用百分比布局开发网页
• 百分比布局， 也叫流式布局
• 效果： 宽度自适应，高度固定。

使用：

• width:100% 宽度占屏幕百分百

• height：100% 高度占屏幕百分百

7.flex布局

Flex布局/弹性布局：

• 是一种浏览器提倡的布局模型

• 布局网页更简单、灵活

• 避免浮动脱标的问题

• display:flex;

• vertical-align,clear,float失效

• 定位，margin，变换有效（都是传统布局技术）

容器属性：

• display:flew 设置普通盒子变为flew盒子
• flex-direction:row/column主轴方向设置
• justify-content:flex-start（默认对齐）/flex-end（右对齐）/center（居中对齐）/space-around（四间隙存放，两侧空间小于中间）/space-between（先两侧对齐，间隙存放）/space-evenly(绝对平均) 控制子元素在主轴上排布方式
• flex-wrap:wrap/nowrap;是否换行；默认不换行，当子元素设置宽度，会进行合理压缩
• flex-flow:flex-direction/flex-wrap
• align-items:flex-start/flex-end/center/stretch;控制子元素侧轴对齐方式（其中子元素只有一行）
• align-content:flex-start/flex-end/center/space-round/space-between/stretch控制子元素侧轴对齐方式（其中子元素为多行）

项目属性：

• ​ flex:设置百分比或者份数

• align-self:控制单独子元素侧轴上对齐方式

  • 注意：默认值是auto,当父元素设置align-items或者align-content,会继承父元素值，当父元素没有设置，值为stretch

• order设置子元素的排列，值越小，越靠前

注意：

• 子元素宽度于

• 子元素不设置高度，会被拉伸与父元素一样高

• 默认情况下flew不会换行，会挤压成一排

8.flew布局/弹性布局

目标：

• display：flew 设置普通的盒子变为flew盒子
• 是一种浏览器提倡的布局模型
• 布局网页更简单、灵活
• 避免浮动脱标的问题

属性：

父项：

• display:flex 设置普通的盒子变为 flex盒子

• justify-content 设置主轴对齐方式

  • flex-start 左对齐

  • flex-end 右对齐

  • center 居中对齐

  • space-between 先两侧对齐，间隙存放

  • space-around 四间隙存放，两侧空间小于中间

  • space-evenly 绝对平均

• align-items 设置侧轴对齐方式（单行）

  • center 居中对齐

  • flex-start 顶部对齐

  • flex-end 底部对齐

• align-content 设置侧轴对齐方式（多行）

  • flex-start 左对齐

  • flex-end 右对齐

  • center 居中对齐

  • space-between 先两侧对齐，间隙存放

  • space-around 四间隙存放，两侧空间小于中间

  • space-evenly 绝对平均

• flex-wrap 设置换行

  • nowrap 默认值 不换行

  • wrap 换行

• flex-direction 设置主轴方向

  • row （默认值 ）左到右

• row-reverse 右到左

  • column （常用） 上到下

  • column-reverse 下到上

  ​

子项：

• justify-content 设置主轴对齐方式

  flex 设置 子项占父项宽度（高度）的比例

• align-self 设置子项自己 在侧轴上的对齐方式

  ​ center居中对齐

  ​ flex-start 顶对齐

  ​ flex-end 底对齐

  ​

  注意：

  • vertical-align,clear,float失效
  • 定位，margin，变换有效（都是传统布局技术）
  • 设置了flew布局，子元素子项可以直接加宽高
  • 默认子元素的宽度由内容撑开，高度会被拉伸与父元素一样高
  • 默认情况下flew不会换行，会挤压成一排

9.布局思路

• 1.不要被技术限制了
  • 浮动
  • 定位
  • 标准流
  • flew
  • 以上这些技术，那些简单方便的实现功能就是用那些
• 2.先划分大盒子，写注释，加内容，加颜色区分
• 3.调试代码的时候，多利用谷歌浏览器
• 4.一般布局容易出错的情况
  • 1标签嵌套错了
  • 2标签和选择器对应不上
  • 3css样式优先级顺序
• 5.当一个模块无从下手时，只看大内容，不用看文字 小图标
  • 从大的框架开始布局，从上到下，从左到右

10.移动屏幕适配

vw /vh

• 能够使用vw单位设置网页元素的尺寸
• 相对单位 , 相对视口的尺寸计算结果
• vw：viewport width
• 1vw = 1/100视口宽度
• vh：viewport height
• 1vh = 1/100视口高度
• 注意： 现实开发中，vw和vh不会混用， vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

计算

解决方案

代码

插件

rem

• 能够使用rem单位设置网页元素的尺寸
• 屏幕宽度不同，网页元素尺寸不同（等比缩放）
• 相对单位 ， rem单位是相对于HTML标签的字号计算结果
• 1rem = 1HTML字号大小

代码

思路

插件

flexible

• 使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
• flexible.js是手淘开发出的一个用来适配移动端的js框架。
• 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

rem 和 vw / vh 的区别

rem

• 需要不断修改html文字大小
• 需要媒体查询media
• 需要 flexible.js

11. less 知识

认识

​ less是一种提高我们编写css效率的技术=>css预处理器

​

代码

变量

运算

​ 

mixin语法

​

​ 嵌套关系

​ 

总结

12 .媒体查询 @media

初体验

语法 

指定区间

​ 

案例

13. bootstrap ui框架

网站https://v3.bootcss.com/

​ 

14. 导航模块水平滚动

15.可以出现第n行省列隐藏

​ display: -webkit-box; ​ overflow: hidden; ​ white-space: normal!important; ​ text-overflow: ellipsis; ​ word-wrap: break-word; ​ -webkit-line-clamp: 3; ​ -webkit-box-orient: vertical;