响应式布局的一些主要内容

一.什么是响应式设计

　　在现今市场上的全部媒体设备上，你的网站都能正确的工做，并有良好的显示效果。

二.建立响应式网站有哪些方面

　　1.HTML

　　　　使用HTML5标记，文档类型声明和初始缩放比，最大缩放比等等，具备清晰和语义化的HTML。

　　2.CSS

　　　　嵌入式样式，注意层叠的做用方式和元素继承规则。

　　　　盒模型：IE的盒模型和默认的chrome盒模型不一样，注意区分

　　3.媒体查询

　　　　容许咱们基于浏览网站的设备的特性来应对不一样的样式声明，

@media only screen and (min-width: 40em){}//此处加上only是为了支持一些老的浏览器
@<link rel="stylesheet" href="style/css.css" media="only screen and (min-width: 40em)">//在样式表中加入媒体查询属性
<style media="only screen and (min-width:40em)"></style> //在页面的style元素的media属性中来包含媒体查询
@media url(styles.css) only screen and (min-width: 40em;)//导入样式表

　　　　能够查询视口宽度和高度，height,width,min-width,max-width。屏幕宽度和高度，device-width,device-height,设备屏幕的实际宽度和高度。方向，orientation，landscape(横排)，portrait(竖排)。宽高比，aspect-ratio视口宽高比，device-aspect-ratio设备屏幕宽高比。分辨率，resolution，未被chrome和safari支持。

　　4.浏览器支持

　　　　能够添加条件注释，缺点是增长额外的代码，条件注释出如今HTML中，能够用他来为IE8及其更早版本制定一个特定的样式表，

1 <!-- [if (lt IE 9)&(!IEMobile)]
2 ...    //HTML代码放在中间，link连接外部样式表
3 <![endif]> 

　　　　另外一个选择是使用腻子脚本为旧版本的IE添加媒体查询支持，好比Respond.js一个快速，轻量级的为IE6-8添加min-width和max-width支持的js腻子脚本肯定是会增长额外的代码到网站中，在不支持js的浏览器中不起做用，且只能用于min-width和max-width

　　5.响应式设计

　　　　渐进加强理念：第一层以HTML定义语义结构第二层以CSS定义表现层第三层以JS定义行为层。

 　　　　网格设计理念：著名的bootstrap中就是用的12列布局

　　6.图像

　　　　图像属性中alt是必要的，title没必要添加。能使用css来添加的图像问题就不要使用图像，

　　7.文本

　　　　使用rem或者em，溢出换行overflow-wrap:break-word;