2020 September 02 HTML与CSS

移动WEB开发-流式、flex、rem布局

移动WEB开发之流式布局

移动端基础

浏览器现状
1. PC端常见浏览器
  1. 360浏、谷歌、火狐、QQ、百度、搜狗、IE。
2. 移动端常见浏览器
  1. UC，QQ，欧朋，百度，360，谷歌，搜狗，猎豹，以及其他杂牌浏览器。
3. 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
4. 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
手机屏幕现状
1. 移动端设备屏幕尺寸非常多，碎片化严重。
2. Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏
3. 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
4. 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。
移动端调试方法
1. Chrome DevTools（谷歌浏览器）的模拟手机调试
  1. 打开谷歌浏览器，点击F12，点击手机图标即可
2. 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
3. 使用外网服务器，直接IP或域名访问

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

标准的viewport设置
1. 视口宽度和设备保持一致
2. 视口的默认缩放比例1.0
3. 不允许用户自行缩放
4. 最大允许的缩放比例1.0
5. 最小允许的缩放比例1.0

二倍图

物理像素&物理像素比
1. 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
2. 我们开发时候的1px 不是一定等于1个物理像素的
3. PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
4. 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
5. PC端和早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的
6. Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
多倍图
1. 对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
2. 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
3. 通常使用二倍图，因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
4. 背景图片注意缩放问题

代码举例：

 <style>
     /* 我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍  100* 100 就会模糊 */
     /* 我们采取的是 放一个 100* 100 图片  然后手动的把这个图片 缩小为 50* 50 （css像素） */
     /* 我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是 2倍图 */
        
     img:nth-child(2) {
         width: 50px;
         height: 50px;
     }
 </style>
 <body>
     <!-- 模糊的 -->
     <img src="images/apple50.jpg" alt="">
     <!-- 我们采取2倍图 -->
     <img src="images/apple100.jpg" alt="">
 </body>

背景缩放 background-size

background-size 属性规定背景图像的尺寸
```
 background-size: 背景图片宽度 背景图片高度;
```
1. 单位：长度|百分比|cover|contain;
2. cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
3. contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

代码举例：

 div {
     width: 500px;
     height: 500px;
     border: 2px solid red;
     background: url(images/dog.jpg) no-repeat;
     /* background-size: 图片的宽度 图片的高度; */
     /* background-size: 500px 200px; */
     /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
     /* background-size: 500px; */
     /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
     /* background-size: 50%; */
     /* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 */
     /* background-size: cover; */
     /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
     background-size: contain;
 }

使用场合
1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍， 100*100图片
2. 解决办法：我们需要把这个图片缩放一半，也就是 50*50background-size
3. 即将100px图片通过background-size属性缩小到50px
```
  div {
     width: 50px;
     height: 50px;
     border: 1px solid red;
     background: url(images/apple100.jpg) no-repeat;
     background-size: 50px 50px;
 }
```

移动端开发选择

移动端主流方案
1. 单独制作移动端页面（主流）
  1. 京东商城手机版/淘宝触屏版/苏宁易购手机版
2. 响应式页面兼容移动端（其次）
  1. 三星手机官网
单独制作移动端页面（主流）
1. 通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
```
 m.taobao.com
 m.taobao.com
 m.suning.com
```
响应式兼容PC移动端
1. 三星电子官网：www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。
2. 缺点：制作麻烦，需要花很大精力去调兼容性问题

移动端技术解决方案

移动端浏览器
1. 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
2. 我们可以放心使用 H5 标签和 CSS3 样式。
3. 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
CSS初始化 normalize.css
1. 移动端 CSS 初始化推荐使用 normalize.css
  1. 保护了有价值的默认值
  2. 修复了浏览器的bug
  3. 是模块化的
  4. 拥有详细的文档
2. 官网地址： http://necolas.github.io/normalize.css/
3. 就是css文件的reset通用样式

CSS3 盒子模型 box-sizing

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

 /*CSS3盒子模型*/ 
 box-sizing: border-box; 
 /*传统盒子模型*/ 
 box-sizing: content-box;

传统or CSS3盒子模型？
1. 移动端可以全部CSS3 盒子模型
2. PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

特殊样式

 /*CSS3盒子模型*/ 
 box-sizing: border-box;
 -webkit-box-sizing: border-box; 
 /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent; 
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none; 
 /*禁用长按页面时的弹出菜单*/ 
 img,a { -webkit-touch-callout: none; }

移动端常见布局

移动端技术选型
1. 单独制作移动端页面（主流）
  1. 流式布局（百分比布局）
  2. flex 弹性布局（强烈推荐）
  3. less+rem+媒体查询布局
  4. 混合布局
2. 响应式页面兼容移动端（其次）
  1. 媒体查询
  2. bootstarp

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width: 最大宽度（max-height 最大高度）
min-width: 最小宽度（min-height 最小高度）

移动WEB开发之flex布局（略）

移动WEB开发之rem适配布局

rem 基础

疑问；
1. 页面布局文字能否随着屏幕大小变化而变化？
2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？
3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
rem 单位
1. rem (root em)是一个相对单位，类似于em.
2. 不同的是rem的基准是相对于html元素的字体大小。
3. 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
4. rem的优势:父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
```
 /* 根html 为 12px */ 
 html {
     font-size: 12px; 
 } 
 /* 此时 div 的字体大小就是 24px */ 
 div {
     font-size: 2rem; 
 }
```
疑问：
1. 如何动态根据移动设备的屏幕尺寸来动态修改html的字体大小，从而来改变整个页面的大小呢？ —媒体查询

媒体查询

什么是媒体查询
1. 媒体查询（Media Query）是CSS3新语法。
2. 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
3. @media可以针对不同的屏幕尺寸设置不同的样式
4. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
5. 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
语法规范
1. 语法
```
 @media mediatype and|not|only (media feature) { 
     CSS-Code; 
 }
```
  1. 用 @media 开头注意@符号
  2. mediatype 媒体类型
  3. 关键字 and not only
  4. media feature 媒体特性必须有小括号包含
2. mediatype 查询类型
  1. 将不同的终端设备划分成不同的类型，称为媒体类型
    1. all：用于所有设备
    2. print：用于打印机和打印预览
    3. scree：用于电脑屏幕，平板电脑，智能手机等
3. 关键字
  1. 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
    1. and：可以将多个媒体特性连接到一起，相当于“且”的意思。
    2. not：排除某个媒体类型，相当于“非”的意思，可以省略。
    3. only：指定某个特定的媒体类型，可以省略。
4. 媒体特性
  1. 每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含
    width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度

代码举例：

 <style>
     /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
     /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
     @media screen and (max-width: 539px) {
         body {
             background-color: blue;
         }
     }
     /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
     /* @media screen and (min-width: 540px) and (max-width: 969px) {
         body {
             background-color: green;
         }
     } */
        
     @media screen and (min-width: 540px) {
         body {
             background-color: green;
         }
     }
     /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
     @media screen and (min-width: 970px) {
         body {
             background-color: red;
         }
     }
     /* 5. screen 还有 and 必须带上不能省略的 */
     /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
 </style>

注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

 * {
     margin: 0;
     padding: 0;
 }
 /* html {
     font-size: 100px;
 } */
 /* 从小到大的顺序 */
    
 @media screen and (min-width: 320px) {
     html {
         font-size: 50px;
     }
 }
    
 @media screen and (min-width: 640px) {
     html {
         font-size: 100px;
     }
 }
    
 .top {
     height: 1rem;
     font-size: .5rem;
     background-color: green;
     color: #fff;
     text-align: center;
     line-height: 1rem;
 }
    
 <body>
     <div class="top">购物车</div>
 </body>

引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法规范

 <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例

  <style>
     /* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
     /* 当我们屏幕小于640 我们让div一行显示一个 */
     /* 一个建议： 我们媒体查询最好的方法是从小到大 */
     /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
 </style>
 <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
 <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

Less 基础

维护 css 的弊端
1. CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
2. CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
3. 不方便维护及扩展，不利于复用。
4. CSS 没有很好的计算能力: width: 30/66 px;不可以这么写
5. 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less 介绍
1. Less （Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，也成为CSS预处理器。
2. 做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。
3. 它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
4. Less中文网址： http://lesscss.cn/
5. 常见的CSS预处理器：Sass、Less、Stylus
6. 一句话：Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。
Less 安装
1. 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/
2. 检查是否安装成功，使用cmd命令（win10 是 window +r 打开运行输入cmd） — 输入node –v查看版本即可
3. 基于nodejs在线安装Less，使用cmd命令npm install -g less即可
4. 检查是否安装成功，使用cmd命令lessc -v查看版本即可

Less 使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

Less 变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
语法：@变量名:值;
变量命名规范
1. 必须有@为前缀
2. 不能包含特殊字符
3. 不能以数字开头
4. 大小写敏感

变量使用规范

 //my.less文件
 // 定义一个粉色的变量
 @color: pink;  
 // 错误的变量名  @1color   @color~@#
 // 变量名区分大小写  @color  和  @Color 是两个不同的变量
 // 定义了一个 字体为14像素的变量
 @font14: 14px;
 body {
     background-color: @color;
 }
 div {
     color: @color;
     font-size: @font14;
 }
 a {
     font-size: @font14;
 }
        

Less 编译
1. 本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
2. 所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
3. vocode Less 插件
  1. Easy LESS 插件用来把less文件编译为 css文件
  2. 安装完毕插件，重新加载下vscode。
  3. 只要保存一下Less文件，会自动生成 CSS文件。
4. html中导入编译后的css文件
```
 //html文件head引入my.less编译后的my.css文件
 <link rel="stylesheet" href="my.css">
```

Less 嵌套

我们经常用到选择器的嵌套

 #header .logo { 
     width: 300px; 
 }

Less 嵌套写法

 #header { 
     .logo { 
         width: 300px; 
     } 
 }

如果遇见（交集

伪类

伪元素选择器）

内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
如果有&符号，它就被解析为父元素自身或父元素的伪类。
```
 a:hover{ 
     color:red; 
 }
```

Less 嵌套写法

 a{
     &:hover{ 
         color:red; 
     }
 }

代码举例：

 .header {
     width: 200px;
     height: 200px;
     background-color: pink;
     // 1. less嵌套 子元素的样式直接写到父元素里面就好了
     a {
         color: red;
         // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
         &:hover {
             color: blue;
         }
     }
 }
 .nav {
     .logo {
         color: green;
     }
     &::before {
         content: "";
     }
 }

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

 /*Less 里面写*/ 
 @witdh: 10px + 5; div {
     border: @witdh solid red; 
 } 
 /*生成的css*/ 
 div {
     border: 15px solid red; 
 } 
 /*Less 甚至还可以这样 */ 
 width: (@width + 5) * 2;

注意：
1. 乘号（*）和除号（/）的写法
2. 运算符中间左右有个空格隔开 1px + 5
3. 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
4. 如果两个值之间只有一个值有单位，则运算结果就取该单位

代码举例：

 @baseFont: 50px;
 html {
     font-size: @baseFont;
 }
 @border: 5px + 5;
 div {
     width: 200px - 50;
     height: (200px + 50px ) * 2;
     border: @border solid red;
     background-color: #666 - #222;
 }
 img {
     width: 82rem / @baseFont;
     height: 82rem / @baseFont;
 }

rem 适配方案

rem 适配方案
1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
rem 实际开发适配方案
1. 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
2. CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
rem 适配方案技术使用（市场主流）
1. 技术方案1
  1. less
  2. 媒体查询
  3. rem
2. 技术方案2（推荐）
  1. flexible.js(淘宝)
  2. rem
3. 总结：
  1. 两种方案现在都存在。
  2. 方案2 更简单，现阶段大家无需了解里面的js代码。

rem 实际开发适配方案1

动态设置 html 标签 font-size 大小
1. 假设设计稿是移动端宽度是750px
2. 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
3. 每一份作为html字体大小，这里就是50px
4. 那么在320px设备的时候，字体大小为320/15 就是 21.33px
5. 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
6. 比如我们以 750为标准设计稿
7. 一个100*100像素的页面元素在 750屏幕下，就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
8. 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
9. 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
元素大小取值方法
1. 最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
2. 屏幕宽度/划分的份数就是 html font-size 的大小
3. 或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

rem 实际开发适配方案2

简洁高效的rem适配方案flexible.js
1. 手机淘宝团队出的简洁高效移动端适配库
2. 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
3. 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
4. 我们要做的，就是确定好我们当前设备的html 文字大小就可以了
5. 比如当前设计稿是750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
6. 里面页面元素rem值：页面元素的px值/75
7. 剩余的，让flexible.js来去算
8. github地址：https://github.com/amfe/lib-flexible

VSCode px 转换rem 插件 cssrem

安装cssrem插件
设置html字体大小基准值：
1. 这个插件默认参考的文字大小为16px，因此要修改为我们默认的html字体大小75px
2. 点击左下角的设置按钮->选择设置
3. 搜索框中输入cssrem，可以看到默认字体为16，可以修改默认字体，比如75
使用
1. 在CSS中可以直接写px，然后会自动弹出提示转化后的rem值