Are you sure you understand the responsive layout？

头像
刘源泉
    阅读 6 分钟

    曾几何时我认为使用了媒体查询就是响应式布局，这种理解实在是太浅薄了，今天就让我们重新来认识下什么是响应式布局

    查看demo

    查看源码，欢迎star

    什么是响应式布局

    前几年风靡一时Bootstrap就是很典型的响应式布局框架，虽然现在已经被淘汰了，但是现在流行的一些UI框架都是借鉴Bootstrap的思想来实现了响应式布局，如Ant Design，Material Design等，可以说Bootstrap开启了响应式布局的时代

    我用过几款响应式布局框架，自己也研究过响应式布局的原理，我认为真正的响应式布局应该是：

    我们的网站使用一套代码，兼容多个终端设备，在不同的设备上会做出不同的调整，如显示或者隐藏等

    点我体验

    响应式布局的要点

    当你想要实现一个响应式布局，你需要注意以下几点

    设置viewport

    我们所做的第一件事就是设置viewport，添加如下代码到你的head标签中

    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>

    上面这段代码的作用是设置我们网页的宽度为设备的宽度，初始化缩放为1，并且禁止用户缩放

    媒体查询

    媒体查询是响应式布局的核心，我们的网页为什么能够根据窗口的大小自动调整样式都是依靠媒体查询

    媒体类型

    @media all {} // 用于所有设备
@media print {} // 用于打印机
@media screen {} // 用于PC，Pad，Phone

    媒体特性

    媒体特性有以下可选项

    媒体特性 取值 接受max或min 描述
    width <length> yes 定义输出设备中的页面可见区域宽度
    height <length> yes 定义输出设备中的页面可见区域高度
    device-width <length> yes 定义输出设备的屏幕可见宽度
    device-height <length> yes 定义输出设备的屏幕可见高度
    orientation portrait,landscape no height是否大于width
    aspect-ratio <ratio> yes width和height的比率
    device-aspect-ratio <ratio> yes device-width和device-height的比率
    resolution <resolution> yes 定义设备的分辨率
    -webkit-device-pixel-ratio <ratio> yes 设备像素比

    移动优先

    移动优先就是我们写的样式以移动端为主，当随着屏幕宽度增大的时候，后面的样式会覆盖前面的样式，请看下面：

    /* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

    PC优先

    PC优先与移动端优先正好相反，我们编写的样式以PC端为主，然后随着屏幕的宽度的减小，后面的样式会覆盖前面的样式，请看下面：

    /* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

    大家注意到没有PC端优先使用的是max-width，而移动端优先使用的是min-width，这个技巧大家有没get到

    字体单位

    由于我们要做响应式布局，我们的字体大小也要随着屏幕的大小进行改变，这时候就不能使用px作为字体单位了，我们可以使用em或者rem，这两者的区别是一个是相对于父元素，一个是相对于html标签。我们推荐使用rem作为字体单位

    默认情况下我们html标签的font-size为16px，我们可以利用媒体查询，设置在不同设备下的字体大小

    /* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

    百分比布局

    用过Bootstrap的同学都知道，它里面有个栅格系统，说白了就是利用百分比来定义我们元素宽高，而不直接使用width。css3支持了最大最小宽高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高

    /* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}

    图片自适应

    图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：

    img {
    max-width: 100%;
    height: auto;
}

    max-width保证了图片能够随着容器的进行等宽扩充，而height为auto可以保证图片进行等比缩放而不至于失真

    如果是背景图片的话要灵活运用background-size属性

    flex，grid，绝对布局，BFC

    除此之外还要灵活运用flex布局，grid布局，绝对布局，BFC等

    最后

    再总结下，实现一个响应式布局我们要注意以下几点：

    • viewport
    • 媒体查询
    • 字体单位
    • 百分比布局
    • 图片自适应
    • flex，grid，BFC，绝对布局等常用技巧

    查看demo

    查看源码，欢迎star

    你们的打赏是我写作的动力

    <img alt='微信' src='https://user-gold-cdn.xitu.io...;h=1280&f=webp&s=39482' width='200' />

    <img alt='支付宝' src='https://user-gold-cdn.xitu.io...;h=1350&f=webp&s=45674' width='200'/>

    lesshtml5htmlcss
    刘源泉
    3 声望0 粉丝
    « 上一篇
    函数的柯里化与Redux中间件及applyMiddleware源码分析

    引用和评论

    推荐阅读
    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.2k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.7k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新