HTML 页面美化

响应式布局：设计理念是基于流动布局、弹性布局、弹性表格、弹性视频和媒体查询等技术组合，使用百分比布局创建流动的弹性界面，使用媒体查询来限制元素的变动范围，这两者组合到一起构成了响应式设计的和兴，固定宽度像素的布局无法适应多变的、未知的设备

px转为em公式：目标元素尺寸/上下文元素尺寸=百分比尺寸

响应式设计的优点：1、面对不同分辨率设备时，灵活性强

                                2、能够快捷解决多设备显示适应问题

响应式设计缺点：1、兼容各种设备，工作量大，效率低

                             2、代码累赘，会出现隐藏无用的元素，加载事件长

                              3、一定程度上改变了网站原有的布局结构会出现页面混乱情况

                               4、响应式设计是一种折中性质的解决方案，因多方面因素影响而达不到最佳影响，因为移动设备的分辨率种类比较多，而且各不相同，所以实现面向移动设备的响应式布局需要了解移动设备视口

meta设置浏览器视口的宽度：

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

视口属性

属性	说明
width	设置layout viewport  的宽度为一个正整数或字符串“width-device”
initial-scale	设置页面的初始缩放值为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值为一个数字可以带小数
maximum-scale	允许用户的最大缩放值为一个数字可以带小数
height	设置layout viewport 的高度为一个正整数或字符串“height-device”
user-scalable	是否允许用户进行缩放，值为 “no” （不允许）或 “yes” （允许）

 < meta viewport >：标签是由苹果公司在其Safari浏览器中引入的，目的就是解决移动设备的饰扣问题，后来安卓及各大浏览器厂商也都纷纷效仿，引入 < meta viewport > 标签的支持

媒体查询：

语法：@media 设备名 only（选取条件）not （选取条件）and （设备选取条件）{

                CSS样式规则；

}

字符间以空格相连，选取条件包含在小括号内，CSS样式规则为兼容设置的样式表，包含在中括号里面，only （限定某种设备，可省略）、and（逻辑与）和not（排除某种设备）为逻辑关键字，多种设备用逗号分隔

可用设备名参数

参数名	说明
all	所有设备
Braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯片
screen	演讲
speech	演讲
tty	固定间距字符网格的媒体，比如电传打印机
tv	电视

媒体查询在网页中分两种方式：

一、在样式表中内嵌@media

@media all and (max-width:1024px){

       /*适合低分辨率桌面浏览器和横屏ipad*/

}

@media all and (max-width:768px){

      / * 适合很低分辨率桌面浏览器和竖屏iPad*/

}

@media all and (max-width:480px){

        /* 适合横屏 iPhone /Android/ */

}

@media all and (max-width:320px){

    / * 适合横屏 iPhone / Android/*/

}

@media all and (max-width:240px){

   / *适合低分辨率移动设备*/

}

二、在link中使用@media：

适合普通分辨率桌面浏览器和横屏iPad：

<link rel="stylesheet" type="type/css" media="all and (max-width:1024px)" href="pc.css"/>

适合低分辨率桌面浏览器和竖屏iPad：

<link rel="stylesheet" type="type/css" media="all and (max-width:768px)" href="ipad.css"/>

适合横屏iPhone/Android：

<link rel="stylesheet" type="type/css" media="all and (max-width:480px)" href="iphone1.css"/>

适合普通分辨率桌面浏览器和横屏iPad：

<link rel="stylesheet" type="type/css" media="all and (max-width:380px)" href="iphone2.css"/>

弹性布局：（也称为“弹性布局盒子”或“伸缩盒子”）

属性	属性值
display	值为flex时，创建弹性布局容器
flex-direction	伸缩流方向  取值有： row（默认值）水平方向，排列顺序与文档相同； row-reverse：水平方向，排列顺序与文档相反； column：垂直方向，排列顺序为从上到下； column-reverse：垂直方向，排列顺序为从下到上
flex-wrap	伸缩流（包括方向与换行） nowrap（默认值）不换行，可能出现重叠或现象 wrap： 当内容超出容器一行时会自动换行，下一行的位置与交叉轴的方向一致 wrap-reverse： 当内容超出容器一行时会自动换行，下一行的位置与交叉轴的方向相反 column-reverse：主轴为垂直方向，排列顺序从下到上
flex-flow	包含了盒子方向和换行，综合了flex-direction和flex-wrap属性
justify-content	flex-start：默认值，内容位于容器开头 flex-end：内容位于容器的结尾 center：内容位于容器中间 space-between：内容位于各行之间留有空白的容器内 space-around：内容位于各行之前、之间、之后都留有空白的容器内
align-items	stretch：默认值，项目被拉伸以适应容器 center：内容位于容器中间 flex-start：内容位于容器的开头 flex-end：内容位于容器的结尾 baseline：内容位于容器的基线上
flex	设置检索弹性模型对象的子元素如何分配空间，flex-grow、flex-shrink和flex-basis属性的简写属性，即伸缩性，默认值： 0 1  auto
order	设置或检索弹性模型对象的子元素出现的顺序，默认值是0
flex-grow	扩展比率
flex-shrink	收缩比率
flex-basis	内容的长度，合法值auto，inherit，或后跟%、px、em、或任何其他长度单位的数字，即伸缩基准值

多列布局：multi-column，是传统网页中块状布局模式的有力扩充

多列属性4

属性	说明
column-count	指定列数
column-fill	指定内容在列与列之间的分布方式，如果去balance值，则指浏览器确保不同列之间的长度差异尽可能小，如果去auto值则按照顺序填充列
column-gap	指定列之间的距离
column-rule	在一条声明中设置column-rule-*的简写属性
column-rule-color	设置列之间的颜色规则，值为颜色
column-rule-style	设置列之间的样式规则，取值和border-style的值相同
column-rule-width	设置列之间的宽度
columns	设置column-span和column-width的简写属性
column-span	指定元素横向夸多少列，取值none和all
column-width	指定列和宽