建设响应式网站网页布局设计步骤方法

前端响应式布局概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

步骤

1、设置Meta标签

大多数移动浏览器将html页面放大为宽的视图(viewport)_以符合民募分镞事.可以使用视勇的mete标签来进行重寞。下的想图标签贵诉浏览爨，使思设夤的宽度作为视图宽度，按11的尺寸显示并禁止初始的缩放。在shead>标签里加入这个meta标签。

2、通过媒体查询来设置样式Media Queries

Media Queries 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写:

//这里面的样式会覆盖掉之前所定义的样式

@media screen and (max-width: 980px){whead { ...}

#content { ..-}#footer { ...}}

3、设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置:

/**ipad*"/

@media only screen and (min-width:768px)and(max-width:1024px){}/**iphone**/

@media only screen and (width:320px)and (width:768px){}

4、字体设置

到目前为止，开发人员用到的字体单位大部分都是像索，虽然像索在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于html元素，rem更方便使用。rem是相对于根元素的，不要忘记重置根元素字体大小:

html{font-size:100%;}

完成后,你可以定义响应式字体:

@media (min-width:640px){body{font-size:1rem;}}@media (min-width:960px)[body{font-size:1.2rem:}}@media (min-width:1200px){body{font-size:1.5rem;}}

5、注意事项

宽度需要使用百分比

#head {width: 100% }tcontent { width: 50%;}

处理图片缩放的方法

给图片指定的最大宽度为百分比。假如图片超过了，就缩小;假如图片小了，就原尺寸输出:img { width: auto; max-width: 100%;}

用:before和:after伪元素+content 属性来动态显示一些内容。在Oss3中，任何元素都可以使用conent属性了，这个方法就是结合ss3的atirt属性和HTML自定义属性的功能。

// HTML结构

<   img src="image.jpg">600px="image-600px.jpg">800px="image-800px.jpg"alt="">

//CSS控制:

@media (min-device-width:600px){img[>600px]{content: attr(>600px,url);}}

@media (min-device-width:800px){img[>800px]{content: attr(>800px,url);

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片:

#log a{

display:block;width:100%;height:40px:

text-indent:55rem;

background-img:url(logo.png);

background-repeat:no-repeat;

background-size:100% 100%;

}

// background-sze是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的widh，第2个值用于指定背景图的heigh，如果只指定一个值，那么另一个值默认为auto. //background-size:cover;等比扩展图片来填满元素

//background-size:contain;等比缩小图片来适应元素的尺寸

其他属性

例如pre ，iframe，video等，都需要和img一样控制好宽度。对于table，建议不要增加padding 属性，低分辨率下使用内容居中;table th, table td { padding: 0 0; text-align: center; }