HTML+CSS学习12-移动web开发和四种布局

移动端基础

国内移动端的浏览器都是webkit内核修改的
常用尺寸单位px

视口viewport

浏览器显示页面内容的屏幕区域，可以分为布局视口、视觉视口、理想视口

布局视口layout viewport

网页的整个区域，IOS和ANDROID基本都将这个视口分辨率设为980px，PC网页通常打开很小，需要手动缩放

视觉视口visual viewport

移动端用户看到的网页区域，网页显示在屏幕的区域

理想视口ideal viewport

设备有多宽，页面布局就有多宽，需要手动添加meta标签告诉浏览器

meta视口标签

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

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

标准视口

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

二倍图

物理像素和物理像素比

物理像素1px=1物理像素
移动端1px能显示的物理像素点个数，称为物理像素比

多倍图

现在移动端多采用retina视网膜显示技术，使更多的物理像素压缩到一个屏幕里，提高屏幕显示细腻程度。
对于一个50px*50px的图片，PC端显示为正常大小，移动端会放大导致图片模糊，所以使用多倍图来提高图片质量

/* 原始图片100px*100px ,手动设为50px*50px达到两倍图的效果 */
<style>
	img{
		widtht:50px;
		height:50px;
	}
</style>

背景缩放background-size

background-size: 背景图片宽度 [背景图片高度];
单位：px / 百分比 / cover / contain
cover: 拉伸图片使背景图片完全覆盖区域
contain: 等比例拉伸图片，当图片的宽或者高和div等大就不再拉伸了

移动端开发

主要选择单独制作移动端页面，其次选择响应式页面。
移动端基本以webkit内核为主。
移动端CSS初始化推荐normalize.css

CSS3盒子模型 box-sizing

传统模式盒子宽度计算：width+border+padding
CSS3盒子模型宽度计算：width(包含border,padding)

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

移动端可以全部使用CSS3盒子模型，PC端要完全兼容使用传统盒子模型

图片格式

DPG图片压缩技术

京东自主研发，节省用户近50%的浏览流量，兼容jpeg，全兼容

webp图片格式

谷歌开发，图片压缩至只有jpeg的2/3，节省大量服务器带宽资源和数据空间

移动端常见布局

单独制作移动端页面（主流）

流式布局（百分比布局）
flex弹性布局
less+rem+媒体查询布局
混合布局

响应式页面（其次）

媒体查询
bootstrap

流式布局(百分比布局)

将盒子的宽度设置成百分比来根据设备屏幕进行伸缩
max-width 最大宽度 max-height 最大高度
min-width 最小宽度 min-height 最小高度

<style>
	section{
		width:100%;
		max-width:980px;
		min-width:320px;
		}
</style>

视口标签

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

flex布局（弹性布局）

操作简单、布局简单、移动端应用广泛，PC浏览器支持较差，IE11或更低版本不支持或仅部分支持。

布局原理

通过给父盒子设置flex布局，来控制子盒子的位置。
把父盒子设为flex布局后，子盒子的float, clear, verticla-align将失效。

//给父盒子设置以下属性

flex-direction: 主轴方向
justify-content: 主轴上子盒子排列方式
flex-wrap: 子元素是否换行
align-content: 侧轴上子盒子排列方式（多行）
align-items: 侧轴上子盒子排列方式（单行）
flex-flow: 复合属性，设置flex-direction flex-wrap

flex-direction

设置主轴方向，默认为从左到右的x轴

flex-direction: row;
flex-direction: row-reverse;  从右到左
flex-direction: column;   从上到下
flex-direction: column-reverse;  从下到上

justify-content

设置主轴上子元素对齐方式

justify-content: flex-start;   子元素从头开始紧贴排列  默认主轴为x,则从左开始
justify-content: flex-end;  子元素从尾开始紧贴排列
justify-content: center;   子元素紧贴在一起，一起居中
justify-content: space-around;   子元素平均分配空间
justify-content: space-between;   一个子元素紧贴头，一个子元素紧贴尾，剩下的均分剩余空间

flex-wrap

flex布局默认子元素不换行，装不下会压缩子盒子宽度

flex-wrap: nowrap;   默认，不换行
flex-wrap: wrap;   换行

align-items

控制子盒子在侧轴的排列方式，子盒子为单行时使用

align-items: flex-start;  从头
align-items: flex-end;  从尾
align-items: center;  居中
align-items: stretch;  拉伸（默认）

align-content

控制子盒子在侧轴排列方式，用于子盒子出现换行情况

align-content: flex-start;  从头
align-content: flex-end;  从尾
align-content: center;  居中
align-content: space-around;  均分
align-content: space-between;  贴头尾再均分
align-content: stretch;  均分父盒子高度

flex-flow

flex-flow: row wrap;
等于：
flex-direction:row;
flex-wrap:wrap;

flex

定义子盒子分配剩余空间份数

flex: 数字，默认0;

子盒子所有的flex相加得到父盒子应该平均分成几份，每个子盒子占几份。

align-self

控制单个子盒子在侧轴的排列方式

align-self: flex-end;

order

定义子盒子的排列顺序，数值越小越靠前，默认0.

<style>
div{
	display:flex;
}
	span{
		order:-1;
		}
</style>
<div><a></a><span><span></div>

rem适配布局

rem是相对于html元素字体大小来说的，em是相对于父元素的字体大小来说的。

rem可以看成多少倍，这里div大小为200px*250px
<style>
	html{
		font-size: 20px;
		}
	div{
		width: 10rem;
		height: 12.5rem;
		}
</style>

媒体查询

@media可以针对不同的屏幕尺寸设置不同的样式

@media mediatype and | not | only (media feature){
	//css code
}

mediatype

all   //用于所有设备
print  //用于打印机和打印预览
screen  //用于电脑、平板、手机等

media feature

width   //定义页面可见区域宽度
min-width   //定义页面最小可见区域宽度
max-width   //定义页面最大可见区域宽度

例：定义当屏幕宽度小于等于800px使用的样式

@media screen and (max-width:800px){}

定义当屏幕宽度在320px~375px使用的样式

@media screen and (min-width:320px) and (max-width:375px){}

定义当屏幕宽度大于375px时的样式

@media scrren and (min-width:375px){}

媒体查询+rem实现适应设备布局

<style>
	@media screen and (min-width:320px){
		html{
			font-size: 20px;
			}
	}
	@media screen and (min-width:375px){
		html{
			font-size: 20px;
			}
	}
</style>

针对不同的媒体使用不同的样式文件

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

例

<link rel="stylesheet" media="screen and (min-width:320px)" href="mystylesheet320.css">
<link rel="stylesheet" media="screen and (min-width:640px)" href="mystylesheet640.css">

less基础

vscode easy less插件

less变量

必须以@为前缀，不能包含特殊字符，不能以数字开头，区分大小写

@变量名： 值；

例，在less文件中

@pinkColor: pink;
@font14: 14px;
body{
	background-color: @pinkColor;
	font-size: @font14;
}

less嵌套写法

//css选择器嵌套
header .logo{
}
header h1{
}

//less写法
header{
	.logo{
	}
	h1{
	}
}

//交集、伪类、伪元素选择器前面要加&
a{
	&:hover{
		color:red;
		}
}
div{
	&::before{
		content: "";
		}
}

less运算

运算符左右需要写空格，计算需要带括号，两个数都有单位取第二个单位，

@width: 10px + 5;
div{
	width: @width;
	}
p{
	border: (@width - 10) solid black;
}
img{
	width: (@width * 4);
}

引入其他less文件

三种写法

@import "common";
@import "common.less";
@import url("common.less");

less文件生成css文件路径

在easy less插件点设置》》扩展设置》》点“在setting.json”中编辑》》在“less.compile”花括号里加上：
“out”:“…/css/”。
表示生成的css文件在当前less文件的上一级css文件夹中。

rem适配方案

使用媒体查询根据不同的设备按比例设置html字体大小，页面元素使用rem作为单位。

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

html字体大小px=屏幕宽度 / 划分份数
页面元素rem值=页面元素px / (屏幕宽度 / 划分份数)=页面元素px / html字体大小

技术方案2：flexible.js+rem

引入flexible.js，在js文件中设置划分的份数，配合使用

响应式布局

针对不同宽度的设备进行布局和样式设置，需要一个父容器来配合子元素实现适配效果。
通过媒体查询改变父容器的大小来改变子元素的排列。
父容器定好宽度，子元素设置百分比。

vw vh移动端布局

vw：viewport width 视口宽度单位
vh：viewport height 视口高度单位
1vw = 1/100视口宽度
1vh = 1/100视口高度
和百分比的区别是这个是相对于设备视口的比例

50*50px  375px视口宽度
50 / 3.75 = 13.3333vw