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

Posted 2020-08-12

一.什么是响应式设计

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

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

　　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;