首页 > 代码库 > 响应式布局的一些主要内容
响应式布局的一些主要内容
一.什么是响应式设计
在现今市场上的所有媒体设备上,你的网站都能正确的工作,并有良好的显示效果。
二.创建响应式网站有哪些方面
1.HTML
使用HTML5标记,文档类型声明和初始缩放比,最大缩放比等等,具有清晰和语义化的HTML。
2.CSS
嵌入式样式,注意层叠的作用方式和元素继承规则。
盒模型:IE的盒模型和默认的chrome盒模型不同,注意区分
3.媒体查询
允许我们基于浏览网站的设备的特性来应对不同的样式声明,
@media only screen and (min-width: 40em){}//此处加上only是为了支持一些老的浏览器@<link rel="stylesheet" href="http://www.mamicode.com/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;
响应式布局的一些主要内容