Web 响应式布局

layout: post
title: "Web前端:响应式布局"

Web 响应式布局

```css
@media screen and {max-width:1024px}{
    #pagewrap{
        width:95%;
    }
    #content{
        width:62%;
    }
    #content.article .hr{
        width:62%;
        margin-left:34%;
    }

}


```

响应式布局的设计原则：

• 百分比分布 仅仅使用媒体查询来适应不同的固定宽度设计,只会从一组css到另一组css的切换.两种之间没有任何平滑渐变.当没有命中媒体查询时,表现就会变得不可控制(滚动,换行)

• 弹性图片

    img{
      max-width:100%;
    }

  同第一点布局使用百分比,图片也使用百分比. 其背后的思路是:无论何时,都全包在图片的元素宽度范围内,以最大的宽度同比完整的显示图片.

• 重新布局,显示和隐藏

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

  1. 同比例缩减元素尺寸
  2. 调整页面结构布局
  3. 隐藏冗余的元素

  经常需要切换位置元素使用[绝对定位],减少重绘提高渲染性能.

关于响应式设计的思考

根据响应式设计的理念,一个页面包含所有设备不同屏幕的样式和图片,当一个移动设备访问一个响应式页面,就会同时下载PC,笔记本,ipad等不同设备上对应的样式.而这些样式却是冗余的,完全没有用的.

权衡利弊:

• 一方面：性能不是最优的
• 而另一方面：减少重复开发