移动web

手机屏幕参数及常识

1.宽高描述的是手机屏幕的宽度和高度单位是英寸 对角线 平时我们讨论的手机尺寸，
包括电脑尺寸，其实都是以屏幕的对角线来衡量的单位英寸

2.逻辑分辨率：屏幕的宽度和高度单位是px

设备分辨率：屏幕中一共拥有的物理像素点的个数

3.物理像素点

指的是屏幕中显示图像最小的单位，如屏幕中的花花绿绿不同的颜色其实就是由一个个小物理像素点来构成的

4.PPI 单位英寸内的物理像素点个数，值越大，屏幕越清晰
5.设备像素比设备分辨率和逻辑分辨率的比例，可以理解为屏幕的清晰度的倍数

动态加载多倍图

背景：

手机的屏幕是存在不同的清晰度划分如下：设备像素比为 1 记为一倍屏设备像素比为 2 记为二倍屏设备像素比为 3 记为三倍屏

既然手机屏幕存在不同的清晰度，那么手机上显示的图片也应该要划分成一倍图、二倍图、三倍图。

设备有不同的清晰度，所以为了让图片更好地适应屏幕展示，

所以不同清晰度的屏幕出现需求动态自动加载对应的图片：

方法1，img标签中使用 srcset

方法2，背景图片中使用 -webkit-image-set

background-image: -webkit-image-set(url("./images/1.png") 1x, url("./images/2.png") 2x, url("./images/3.png") 3x);

实际开发中，如果没有特别的要求，我们就不需要使用 srcset 或者 image-set 技术

-webkit是一个私有属性，并不是所有浏览器都可以识别；
-ms代表【ie】内核识别码；
-moz代表火狐【Firefox】内核识别码；
-webkit代表谷歌【Chrome】/苹果【safari】内核识别码；*
-o代表欧朋【Opera】内核识别码；

移动端视口

视口是指手机浏览器内显示页面的区域，

一般可以认为视口的宽度等于网页的根标签html的宽度

视口可以按照移动端历史的发展来分类，主要分为两种

1.布局视口

在早期刚推出手机的时候，手机上的浏览器想要在一个较小的手机屏幕中，显示pc端上的网页，采取了一种策略，将网页缩小，放入手机浏览器中。

当时的pc端的网站，版心一般都是小于等于980px，因此，浏览器就将 html标签设置为 980px，然后缩放到手机中布局视口的特点是 html标签的大小是 980px 页面上的元素都是被缩放的

早期移动端布局的产物，了解即可

2.理想视口

目前移动端上都在使用

经过布局视口和理想视口代码的对比，可以发现，两者的区别仅仅是在于有没有添加以下这行代码

有添加，就是理想视口，没有添加，就是布局视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta 标签 对网页设置语言设置SEO 关键字；

name 告诉meta标签要设置什么地方 viewport视口；

content 设置视口的那些内容

1.width=device-width 视口的宽度等于屏幕的宽度

2.initial-scale=1.0 设置网页打开的时候缩放的倍数为1.0，也就是没有需要缩放网页

3.maximum-scale=1 允许缩放，最大的倍数 1.0

4.minimum-scale=1 允许缩放，最小的倍数 1.0

5.user-scalable=no 控制是否允许用户双击手指捏合的手势来缩放网页

快捷写法： meta：vp+tab

移动适配

1.移动端网页效果需要实现需求：

当移动屏幕宽度不同，网页元素尺寸需要跟着一起变化（等比缩放）

2.px单位** 是绝对长度单位大小固定不变

百分比布局 特点宽度自适应，高度固定

（px单位或百分比布局无法实现适应不同的移动端）

3.目前适配方案

想要实现在不同的屏幕宽度下适配需求 重点在于单位上

使用相对长度单位

Ø rem 目前多数企业在用的解决方案（主流）

Ø vw / vh 未来的解决方案（vw 最简单和最容易！）

vw单位

vw 和 vh 都是相对长度单位（需要找到参照物的）相对于屏幕宽度/高度

100vw = 屏幕的宽度 100vh = 屏幕的高度

vw：viewport width vh：viewport height

1vw = 1/100视口宽度 1vh = 1/100视口高度

移动端屏幕适配

演变原理：

要适配的手机的屏幕宽度 / 设计稿的宽度 = 要适配的屏幕中的div的宽度 / 设计稿中div的宽度

(已知：要适配的手机的屏幕宽度100vw，设计稿的宽度，设计稿中div的宽度求 要适配的屏幕中的div的宽度)

a / b = c / d

c = ( a * d ) / b

*要适配的手机中的div宽度=（要适配的手机的屏幕 100vw ）设计稿中div的宽度 / 设计稿的宽度

方法一：转换为vw单位

直接书写代码

注意点： calc 内单位可以进行加减乘除运算，但是运算符两侧必须加空格；

方法二：使用插件直接转换（常用）

rem单位

rem适配原理：

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

10rem = 10倍根标签字体大小 = 屏幕宽度

rem单位

1.相对长度单位

2.rem单位参照物HTML标签的字号（根标签字号fontsize）

3.计算结果1rem = 1HTML字号大小 （谷歌浏览器字体默认16px,即在 谷歌中1rem = 16px, 谷歌浏览器默认最小字体12px）

4.rem大小是相对于页面根标签字体的大小，页面根标签字体大小改变，rem大小也会改变；

5.不要去研究 rem 小于 12 的时候的情况，自己设置尽可能将html的字体设置为大于等于12，避免问题出现

转换rem计算方式：

*要适配的手机中的div宽度=（要适配的手机的屏幕 10rem ）设计稿中div的宽度 / 设计稿的宽度

方法一：将px单位转换为rem单位

先引入js代码，再书写代码

（flexible.js是手淘开发出的一个用来适配移动端的js框架。

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size）

方法二：将px单位转换为rem单位（主流）

书写格式

2.手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

Less语法

特点：

1.Less是一个CSS预处理器,可以提高我们编写css效率的技术

2.Less文件后缀是.less

3.常见的css预处理器（less，scss，stylues）

4.CSS不支持计算写法,可以通过Less实现。less使 CSS 具备一定的逻辑性、计算能力。 5.浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

less工作流程：

1.新建一个less文件（后缀名就是 .less），然后按照less语法要求在less文件中编写样式代码；

2.通过 VS插件easy less 把文件编译less文件，会自动生成我们熟悉的对应的 css文件；

3.在网页中书写link标签，直接引入编译好的 .css文件（注意不是引入 .less文件）

less作用：

1，使用Less变量统一设置属性值

网页中, 文字文字颜色基本都是统一的，可以统一设置/修改网站改版属性，变换文字颜色..

可以把颜色提前存储到一个容器，设置属性值为这个容器名

固定语法：

1，定义 @变量名: 值; //变量名可以是任意的名称，推荐带语义的英文名称

2，使用 CSS属性：@变量名;

例1

//1,定义变量aaa	
.aaa(@1,@2){
    //存放你想要用到的代码
    background-image: url(2.png);
    background-size:100%;
    background-repeat: no-repeat;
   
    
    //也可以传递参数
    background-position: @1 @2;
}

//2,使用
div{
    .aaa(50px,30px);
}


//3，生成的对应的css样式
/*
div {
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50px 30px;
}
*/

2，less内支持运算

在默认的css中不支持运算，需要运算时只能在 calc 内运算；

而 less 内是支持运算的

在css内：

在less内：

3，less语法的嵌套

//嵌套内容可以折叠，也可以通过 拖动标签 更改标签位置

4,less实现的伪元素

div{
    height: 200px;
    background-color: red;

    &::before{  						//注意 需要加上一个 & 连接
        content: "less实现的伪元素";
    }
}

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

媒体查询

作用：根据屏幕宽度不同去使用不同的css（响应式布局原理）

在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，

为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。

流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度

媒体查询语法:

1.@media 媒体类型 { /* css样式 */ }

2.@media 媒体类型 and 媒体特性 { /* css样式 */ }

/* 当屏幕宽度 小于 500px（最大就是500px） 	背景色为蓝色  */
        @media screen and (max-width:500px) {
            body{
                background-color: blue;
            }
        }

/* 当屏幕宽度 大于 500px（最小就是500px）	 并且		小于	800px（最大就是800px） 	背景色为红色  */
 @media screen and (min-width:500px) and (max-width:800px) {
            body {
               	background-color: red;
    				 }
            }

栅格系统（ Bootstrap ）

使用bootstrap UI 框架的时候是不需要和以前一样写base.css 来样式的格式化

媒体查询 + 浮动就是bootstrap 实现栅格系统的本质

一般情况下，响应式布局的网站，不建议使用 flex

（响应式布局包含了PC端和移动端，PC端可能会存在低版本的浏览器，如IE8，9,10

低版本的PC端的IE浏览器，会css3的支持没有那么优化，导致flex无效；

除非特别的情况，经理明确说明，不用管度版本的IE，那么就可以正常使用学习过的 css3的知识，过渡，动画，flex）

1,须知

1.栅格系统用于通过一系列的*行（row）与列（column）*的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

“行（row）”必须包含在 *`.container` （固定宽度）*或 *`.container-fluid` （100% 宽度）*中

2.Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

3.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 （小屏幕下每列4份）来创建。

4.bootstrap 默认将一行划分成了12份，一列就占一份

5.如果一行超过了12份，就会和浮动的特性一样往下掉

6.在Bootstrap中，.container （居中的版心）宽度会跟随屏幕宽度的变化而变化（不用管值是多少px，版心会自动调整大小就可了）

7.居中的版心 .container

需要全屏时 .container-fluid

2，步骤

1 先写版心 .container / .container-fluid

2 写行 row

3 写栅格 (分析什么屏幕下，每一列占多少份)

3，固定用法

1.先外层写一个类名字是固定的 container

2.里面写一个类 row 固定的

3.根据需求（在什么样的屏幕下一行显示几个元素）

<div class="container">
   <div class="row">
		//col 列			lg	大屏幕		2	每一列占两份
		<div class="col-lg-2"></div>
		<div class="col-lg-2"></div>
		<div class="col-lg-2"></div>
		<div class="col-lg-2"></div>
		<div class="col-lg-2"></div>
		<div class="col-lg-2"></div>
		//表示一个	在大屏幕下 6列 每列占2份  的屏幕表格分布
  </div>
</div>

移动web基础知识

移动web

手机屏幕参数及常识

动态加载多倍图

移动端视口

1.布局视口

2.理想视口

移动适配

vw单位

rem单位

Less语法

特点：

less工作流程：

less作用：

媒体查询

栅格系统（ Bootstrap ）