Are you sure you understand the responsive layout?

2018-08-10 admin

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

查看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’/>

原文链接:https://segmentfault.com/a/1190000015952421

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37670.html

文章标题:Are you sure you understand the responsive layout?

相关文章
Zepto parent
parent([selector]) ⇒ collection 获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。 ...
2017-04-25
使用vue-grid-layout完成桌面拖拽布局功能
最近在用写公司项目里的一个桌面布局功能 需要使用到vue-grid-layout 看了下网上的 基本上只有demo的使用,这个插件虽然挺不错但是缺陷也很大. 没有下边界,发生碰撞的时候块会无限的往下移动,开放的API个人感觉没什么用 htt...
2018-06-16
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起...
2017-03-15
利用imgareaselect辅助后台实现图片上传裁剪
因为项目当中用到图片裁剪,本来可以不用到后台进行裁剪的,但是要兼容万恶的IE浏览器,所以不得不使用后台进行裁剪。 这次使用到imgareaselect 插件获取需要裁剪区域的坐标,再由后台进行裁剪操作。先上个效果图再说 但是这里有一个坑就...
2017-03-13
JavaScript实现textarea限制输入字数
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxleng...
2017-03-14
php结合imgareaselect实现图片裁剪
引用CSS &#x2F;js&#x2F;jquery.imgareaselect-0.9.10&#x2F;css&#x2F;imgareaselect-default.css 引用js &#x2F;js&#x2F;jquery.imga...
2017-03-27
scroll to the future - 现代 JavaScript 滚动条实践
Scrollbars in Windows &lt;/figcaption&gt; In 2011, Apple’s interface designers, taking clues from iOS, had put a definit...
2018-04-26
ConstraintLayout使用汇总
前言 在这里我要向大家介绍ConstraintLayout,它是一种布局方法,可以帮助我们在对Android进行布局时减少对布局层次的嵌套,进而提高app的性能。 接下来我会通过一些示例来全面介绍ConstraintLayout的使用方式与...
2018-05-16
[Podcast] [英] The Future of RxJS 6 & 7 - Roadmapping Operators
In this Modern Web podcast Ben Lesh discusses the future of RxJS with Tracy Lee. Topics covered: Decreasing the bundle ...
2018-02-23
Grid Layout 最佳实践
An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the be...
2018-04-26
回到顶部