移动端页面布局方式，简单记录一下

②meta视口标签
（1）主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽。
（2）语法：meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
在这里插入图片描述
（3）标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

2、多倍图

①物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。
开发时的1px不是一定等于1个物理像素的
PC端页面，1px等于1个物理像素的，但是移动端不一定
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
PC端和早期的手机屏幕：1CSS像素 = 1物理像素的，后来，Retina（视网膜屏幕）一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

②多背图

对于一张50px*50px的图片，在手机Retina屏幕中打开，按照上面的物理像素比放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片网站质量，解决在高清设备中的模糊问题。
通常使用二倍图，也有3倍图、4倍图…看实际开发
背景图片注意缩放问题，例如如果使用二倍图，就要将大一倍的图缩小：

background-size:参数该属性规定背景图片的尺寸
参数：
（1）写两个参数：就分别表示宽和高
（2）只写一个参数，就表示宽，高就省略了
（3）cover：高宽等比例拉伸，拉伸到完全覆盖盒子位置
（4）contain：高宽等比例拉伸，当宽度或高度铺满盒子就不再进行拉伸了，可能有空白部分

3、移动端开发选择

①单独制作移动端页面
②响应式兼容PC端

4、移动端技术解决方案

①移动端浏览器基本以webkit内核为主，可以放心使用H5标签和C3样式。

②CSS初始化
移动端CSS初始化推荐使用normalize.css/

保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档

官网：http://necolas.github.io/normalize.css/

③移动端中的盒子模型
在移动端中盒子模型用的是box-sizing，与传统的content-box盒子模型相比，box-sizing中的padding和border不会撑大盒子了
在这里插入图片描述

④特殊样式
在这里插入图片描述

在这里插入图片描述

5、移动端常见布局

①单独制作移动端页面

流式布局（百分比布局）
flex弹性布局（强烈推荐）
less+rem+媒体查询布局

②响应式兼容PC端

媒体查询
bootstarp

6、流式布局

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

为了保护内容不因为过分伸缩被破坏，可以加两个属性：
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

②开发前准备工作
（1）设置视口标签
（2）移动端CSS初始化
推荐使用normalize.css/
在这里插入图片描述

③二倍精灵图做法
（1）先把精灵图等比例缩放为原来的一半
（2）之后根据大小测量坐标
（3）background-size中也要写精灵图原来的一半

7、flex弹性布局

①flex与传统布局比较

传统布局：

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

flex弹性布局

操作方便，布局极为简单，移动端应用广泛
PC端浏览器支持情况较差

建议：
1、如果是PC端页面布局，我们还是传统布局
2、如果是移动端或者不考虑兼容性问题的PC端页面布局，可以使用flex弹性布局

②flex布局原理

flex是flexble Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，成为flex项目，简称“项目”。子容器可以横向排列也可以纵向排列。
在这里插入图片描述

总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

开启flex弹性布局：在父元素中写display:flex

③常见父项属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和 flex-wrap

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有行和列、X轴和Y轴

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，垂直向下

下面详细介绍父项的各个属性：
（1）flex-direction:属性值：设置主轴的方向

我们的元素是跟着主轴方向来排列的。flex-direction:row-reverse和flex-direction:column-reverse就是翻转，了解即可。

注意：
主轴和侧轴是会变化的，就是flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

（2）justify-content：设置主轴上的子元素排列方式
justify-content属性定义了项目（子元素）在主轴上的对齐方式

注意：使用这个属性之前一定要确定号主轴是哪个

在这里插入图片描述
space-around与space-between的区别：
前者不贴边，直接平分；后者要前后先贴边，其他元素再平分

（3）flex-wrap：设置子元素是否换行
在默认情况，项目（子元素）都排在一条线上（又称“轴线”）。flex-wrap属性定义，flex布局中默认是不换行的。即使项目总宽度超过了容器（父元素）宽度，就会自动缩小：
在这里插入图片描述

要想允许自动换行，就要把其值改为wrap

（4）align-items：设置侧轴上的子元素排列方式（单行）
上面只学了在主轴上的排列方式，只能实现在一条线上排列，要想在二维中排列，就必须还需要控制侧轴上的排列方式。
该属性是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项的时候使用。
在这里插入图片描述
和前面的在主轴上的排列方式差不多，多了一个stretch值，这个就是项目没有给高度就会自动拉满。

垂直居中水平居中：

/*设置主轴居中和侧轴居中 */
justify-content: center;
align-items: center;

在这里插入图片描述

（5）align-content：设置侧轴上的子元素的排列方式（多行）
上面的align-items只能设置单行，多行就做不了了，就需要align-content来实现。
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（就是多行），在但行没有效果。
属性如下：
在这里插入图片描述
align-content和align-items区别：

align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸、
align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸、平均分配剩余空间等属性值。
单行找align-items，多行找align-content
一定要认清主轴，如果主轴变成y轴了，一切说的行都变成列了。

（6）flex-flow：复合属性，相当于同时设置了flex-direction和 flex-wrap
例如：flex-flow:row wrap;

④常见子项属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列顺序
order属性定义子项的排列顺序（前后排序）

下面详细介绍一下子项的这三个属性：
（1）flex子项目占的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{
	flex:<number>;/* 默认0 */
}

（2）align-self控制子项自己在侧轴的排列顺序
align-self属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同与stretch。
例如：

span:nth-child(2){
	/* 设置自己在侧轴上的排列方式 */
	align-self:flex-end;
}

（3）order属性定义子项的排列顺序（前后排序）
数值越小，排列越靠前，默认为0；
注意和z-index不一样。

④flex布局开发前的准备工作
（1）设置视口标签
（2）移动端CSS初始化
推荐使用normalize.css/
在这里插入图片描述
（3）常用初始化样式

body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
            color: #000;
            background: #be1515;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

8、rem适配布局

①rem基础

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于HTML元素的字体大小。
比如，根元素（HTML）设置font-size=12px，非根元素设置width:2rem；则换成px表示就是24px。

html{
	font-size:14px;
}
p{
	width:10rem;
	height:10rem;
}

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。

②媒体查询

（1）什么是媒体查询
媒体查询（Medla Query）是CSS3的新语法。

（2）作用

使用@medla查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当重启浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

（3）如何使用

@media mediatype and|not|only(media feature){
	CSS-Code;
}

用@media开头注意@符号：声明

mediatype媒体类型：
在这里插入图片描述

关键字and not only ：
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

media feature 媒体特性（必须有小括号包含）：
每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特征设置不同的展示风格。暂且了解三个。
在这里插入图片描述
例如

（4）媒体查询+rem实现元素动态大小变化
rem单位跟着HTML来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

例如：

    <style>
        @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;
            text-align: center;
            background-color: pink;
            color: #fff;
            line-height: 1rem;
        }
    </style>

<body>
    <div class="top">媒体查询</div>
</body>

就可以实现宽度不同时，文字大小也不同：
在这里插入图片描述

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

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

③Less基础

（1）CSS的弊端
CSS是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念。

CSS需要书写大量看似没有逻辑的代码，冗余度比较高。
不方便维护及扩展，不利于复用
CSS没有很好的计算能力
非前端开发工程师来讲，往往会因为CSS变现经验而很难写出组织良好且易于维护的CSS代码项目。

（2）Less介绍
Less（Leaner Style Sheets）是一门CSS扩展语言，也成为CSS预处理器。

作为CSS的一种形式的扩展，并没有减少CSS的功能，而是在现有的CSS语法上，为加入程序式语言的特性。
Less在CSS的语法基础上加入了变量、Mixin（混入）、运算以及函数等功能，简化了CSS的编写，降低了CSS的维护成本。

Less中文网址：http//lesscss.cn

常见的CSS预处理器：Sass、Less、Stylus

（3）Less的使用
首先建一个后缀名为less的文件，在这个less文件里面书写less语句（语句具体看下面几小节）。
本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

在vscode中可以通过名为easyless插件来解析，保存就会自动生成css文件。

（4）Less变量
语法：@变量名:值;
要求命名必须规范：要有@前缀，不能包含特殊字符，不能以数字开头，大小写敏感。

// 定义一个粉色的变量
@color:blue;
body{
    background-color: @color;
}
div{
    color:@color;
}

（5）Less嵌套
语法：

//嵌套
.header{
    width: 200px;
    height: 200px;
    background-color: pink;
    a{
        color: red;
    }
}

如果遇到（交集|伪类|伪元素选择器）

内层选择器的前面没有&符号，则它被解析为父选择器的后代
如果有&符号，就被解析为父元素自身或父元素的伪类，也就是说要写伪元素类或伪类，前面就加一个&。

例如

//嵌套
.header{
    width: 200px;
    height: 200px;
    background-color: pink;
    a{
        color: red;
        &:hover{
			color:blue;
		}
    }
}

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

@border:5px + 5;
div{
    width: 200px;
    height: (200px / 2);
    border: @border solid green;
}

注意：

运算符的写法：+、-、*、/

运算符左右有一个空格隔开，例如1px + 5

对于不同的单位的值之间的运算，运算结果的值取第一个值的单位

如果两个值之间只有一个值有单位，则运算结果就取该单位

除法运算（/）必须要用括号括起来，例如：height: (200px / 2);

④rem适配方案

（1）rem实际开发适配方案

按照设计稿与设备宽度的比例，动态设计并设置html根标签的font-size（配体查询）
CSS中，设计稿元素的宽、高、相对位置等取值，按照同比例换算为rem为单位的值。

（2）rem适配方案技术使用（市场主流）

技术方案1：less+媒体查询+rem
技术方案2（推荐）：flexible.js+rem

（3）技术方案1：less+媒体查询+rem

动态设置html标签font-size大小：

假设设计稿为750px，我们把整个屏幕划分为15等分（也可以是其他份数）
每一份作为html字体大小，这里就是50px
那么在320px的设备的时候，字体大小为320/15就是21.33px
用页面元素的大小除以不同的html字体大小比例还是相同的

在这里插入图片描述
元素大小取值方法（首先要选一套标准尺寸例如750px）：

最后公式：页面元素的rem值=页面元素值（px）/(屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html的font-size大小
或者页面元素的rem值 = 页面元素值（px）/html font-size大小

在这里插入图片描述

less文件导入到另一个less文件的方法：

@import "common";

这样就可以把公共less文件导入到每个页面的less文件中去了。

（4）技术方案2（推荐）：flexible.js+rem
现在flexible.js好像没有维护了，这种封装文件应该还有许多，后续了解了再更新。

9、响应式布局

①响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

②响应式布局容器

响应式首先需要一个父级作为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

响应式尺寸划分：
在这里插入图片描述

超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板）：设置宽度为750px
中等屏幕（桌面显示器）：宽度设置为970px
大屏幕（大桌面显示器）：宽度设置为1170px

③Bootstrap前端开发框架

（1）简介
Bootstrap来自于Twitter，十分受欢迎的前端框架。它是基于html、css和js的，简洁灵活，使嘚Web开发更加快捷。
中文官网：http://www.bootcss.com
官网：http://getbootstrap.com

（2）优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发效率

（3）Bootstrap使用

创建文件夹结构
创建html骨架结构
引入相关样式
书写内容

④栅格系统

栅格系统，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。