响应式布局讲解

响应式布局已经不是什么新鲜事物了，但使用的场景却在变少，由于如今web程序变得愈发丰富和复杂，而产品对移动端的重视也超过了pc端，若是仅用响应式布局实现适配，代码的复杂度和兼容性都难以维护，而且很容易形成代码冗余（好比媒体查询的多余代码）。开发成本和另开发一款程序接近，所以，独立开发出一款针对移动端的web程序已近变成了不少公司最佳方案。

那么响应式布局就无用武之地了？也不是，当咱们只是开一款功能单一的展现性程序时，如静态页面，那么响应式布局多是最优选。因此响应式布局开始从最流行的方案变成一种折中方案。

接下来就讲讲如何设计一个简单的响应式布局。

响应式布局的几个主要因素：

• viewport：
  

响应式布局原本是要适配移动端和pc端的，但viewport的存在让针对移动端的设置都失去了效果，因此第一步就是让viewport失去效果：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>

至于viewport具体解释，你们能够看下这个：此像素非彼像素。

• 媒体查询（@media）设置断点：
  

响应式布局最主要的手段即是媒体查询，经过媒体查询设置断点，能够为各类屏幕宽度的设备提供对应样式。断点的设置通常能够设置为三种类型，如手机（<=480px），平板（480-720px），桌面电脑（>=1024px），这固然是大概的设置，若是想更加具体点，能够拖动浏览器屏幕，以适应不一样的宽度，选择开始变形的那个尺度做为断点便可。媒体查询的使用：

在样式表中使用：

@media (min-width: 481px) and (max-width:768px) {
    /*具体操做*/
}复制代码

在链接时调用：

<link href="styles.css" rel="stylesheet" media="(max-width:480px)">复制代码

使用@import导入：

@import url(styles.css) (max-width:480px)

具体的使用同窗们能够看看MDN的教程。

• 使用流式，浮动栅格布局：
  

响应式布局最多见的就是在pc端使用多栏布局（栅格），由于栅格布局很方便在不一样屏幕设备中进行增删或者移动从而实现各类大小屏幕的适配（如小屏幕就一栏，而大屏幕就有三栏），每栏的宽度用流式布局（有时也叫弹性布局，就是width使用百分比）进行适应，由于不一样屏幕的宽度各异。而后使用浮动进行横排。最外层包裹元素通常加个max-width，防止pc大屏太宽，致使页面内容跨度过大，形成阅读困难。大概的代码：

<main>
    <aside></aside>
    <article></article>
    <aside></aside>
</main>
<style>
    main{
        max-width:1200px;
    }
    aside{
        float:left;
        width: 20%;
    }
    article{
        float:left;
        width: 60%;
    }
</style>复制代码

而后根据断点判断屏幕大小，对每一栏清除浮动，删减或者移至下方。因为咱们是桌面设备优先的，因此媒体查询的是移动端大小，（固然也能够移动端优先，反过来就是了）大概代码：

@media (max-width:481px) {
    aside {
        float: none;
        width: auto;
    }
    article{
        float: none;
        width: auto;
    }
}复制代码

是否是很简单，这就是所谓的响应式布局了，固然代码我是极其简化的，应该还有不少细节上的修饰。除了流式，浮动栅格布局，还有flex布局，table布局等等都是能够实现响应式设计的。具体看状况使用。接下来说讲一些注意事项：

响应式布局的一些问题：

• 重置盒子模型：
  

web浏览器的盒子模型默认是不把边框和内边距计算在内容区的width中的（IE低版本除外），当使用流式布局时，就是百分比设置栏宽时，会形成干扰，如第一栏的width是60%，第二栏是40%，原本是一行内恰好放得下，但若是某一栏设置边框或者内边距后，总体宽度就被加大，第二栏就会被挤下去。因此要设置box-sizing：border;将边框和内边距计算进内容区的width中，即60%中包含了边框和内边距。固然不嫌麻烦的话，也能够用css的cale函数，不过这会形成性能问题，不建议使用。

• HTML代码的顺序：
  

要注意HTML代码的顺序，由于不少时候咱们的主内容区是放到中间的，如：

<aside></aside>
<article></article>
<aside></aside>复制代码

而在移动端时它应该放到最上面，可因为代码的顺序关系，清除浮动后，它是按顺序放到中间去了，（具体看上图）。为了加强用户体验，让移动端的用户第一眼就能看到主要内容，而不用下拉，因此HTML编码时，应该让主内容区放到最上层，要浮动时，加个外层，让主内容区和相邻侧边分别浮动到两边便可。大概代码：

<div>
    <article></article>
    <aside></aside>
</div>
<aside></aside>复制代码

div{
    float:left;
    width: 80%;
}
div article{
    float:right;
    width: 75%;
}
div aside{
    float:left;
    width: 25%
}
aside{
    float:left;
    width: 20%
}复制代码

• 图片和视频的大小：
  

图片也要用百分比，否则会溢出布局以外，通常用max-width：100%，当没有溢出布局时，图片保持原来大小不变，但要溢出布局时，限制图片的最大宽度为布局宽度，注意图片的高度不要设置，否则高度固定的话，图片的宽度变化会致使变形，高度不设置，让它随宽度自动作等比例变化便可。图片的大小变化解决了，但仍是有个问题，就是原本移动端要展现的是小图片，但却要下载大图片形成流量的浪费。解决的方法挺多的，好比img最新的srcset属性（有兼容性问题，IE彻底不支持）。或者是用js判断获取不一样的图片（麻烦）。看状况运用吧。

最后：以为好的话记得点个赞哈。