响应式设计

媒体查询

@media screen and (max-width:1024px){

#pagewrap{

width:95.5%;

}

#content{

width:62%;

}

#content .article .hr{

width:66%;

margin-left:34%;

}

}

设计点一：百分比布局

仅仅使用媒体查询来适应不同的固定宽度设计，只会从一组CSS到另一组CSS的切换。两种之间的没有任何平滑渐变。当没有命中媒体查询时，表现就会变得不可控制（滚动、换行）。

设计点一：弹性图片

img{

max-width:100%;

思路是：无论何时，都全包在图片的元素宽度范围内，以最大的宽度同比完整地显示图片

设计点三：重新布局，显示与隐藏

当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，简洁。所以我们必须要以下处理：

1、同比例缩减元素尺寸

2、调整页面结构 布局

3、隐藏多余的元素 

注：经常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能