首页 > 代码库 > 响应式布局的一些主要内容

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

一.什么是响应式设计

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

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

  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;

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