资讯专栏INFORMATION COLUMN

Are you sure you understand the responsive layout?

Shisui / 996人阅读

摘要:我们推荐使用作为字体单位默认情况下我们标签的为,我们可以利用媒体查询,设置在不同设备下的字体大小百分比布局用过的同学都知道,它里面有个栅格系统,说白了就是利用百分比来定义我们元素宽高,而不直接使用。

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

查看demo

查看源码,欢迎star

什么是响应式布局

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

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

</>复制代码

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

点我体验

响应式布局的要点

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

设置viewport

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

</>复制代码

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

媒体查询

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

媒体类型

</>复制代码

  1. @media all {} // 用于所有设备
  2. @media print {} // 用于打印机
  3. @media screen {} // 用于PC,Pad,Phone
媒体特性

媒体特性有以下可选项

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

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

</>复制代码

  1. /* iphone6 7 8 */
  2. body {
  3. background-color: yellow;
  4. }
  5. /* iphone 5 */
  6. @media screen and (max-width: 320px) {
  7. body {
  8. background-color: red;
  9. }
  10. }
  11. /* iphoneX */
  12. @media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
  13. body {
  14. background-color: #0FF000;
  15. }
  16. }
  17. /* iphone6 7 8 plus */
  18. @media screen and (min-width: 414px) {
  19. body {
  20. background-color: blue;
  21. }
  22. }
  23. /* ipad */
  24. @media screen and (min-width: 768px) {
  25. body {
  26. background-color: green;
  27. }
  28. }
  29. /* ipad pro */
  30. @media screen and (min-width: 1024px) {
  31. body {
  32. background-color: #FF00FF;
  33. }
  34. }
  35. /* pc */
  36. @media screen and (min-width: 1100px) {
  37. body {
  38. background-color: black;
  39. }
  40. }
PC优先

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

</>复制代码

  1. /* pc width > 1024px */
  2. body {
  3. background-color: yellow;
  4. }
  5. /* ipad pro */
  6. @media screen and (max-width: 1024px) {
  7. body {
  8. background-color: #FF00FF;
  9. }
  10. }
  11. /* ipad */
  12. @media screen and (max-width: 768px) {
  13. body {
  14. background-color: green;
  15. }
  16. }
  17. /* iphone6 7 8 plus */
  18. @media screen and (max-width: 414px) {
  19. body {
  20. background-color: blue;
  21. }
  22. }
  23. /* iphoneX */
  24. @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
  25. body {
  26. background-color: #0FF000;
  27. }
  28. }
  29. /* iphone6 7 8 */
  30. @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
  31. body {
  32. background-color: #0FF000;
  33. }
  34. }
  35. /* iphone5 */
  36. @media screen and (max-width: 320px) {
  37. body {
  38. background-color: #0FF000;
  39. }
  40. }

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

字体单位

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

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

</>复制代码

  1. /* pc width > 1100px */
  2. html{ font-size: 100%;}
  3. body {
  4. background-color: yellow;
  5. font-size: 1.5rem;
  6. }
  7. /* ipad pro */
  8. @media screen and (max-width: 1024px) {
  9. body {
  10. background-color: #FF00FF;
  11. font-size: 1.4rem;
  12. }
  13. }
  14. /* ipad */
  15. @media screen and (max-width: 768px) {
  16. body {
  17. background-color: green;
  18. font-size: 1.3rem;
  19. }
  20. }
  21. /* iphone6 7 8 plus */
  22. @media screen and (max-width: 414px) {
  23. body {
  24. background-color: blue;
  25. font-size: 1.25rem;
  26. }
  27. }
  28. /* iphoneX */
  29. @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
  30. body {
  31. background-color: #0FF000;
  32. font-size: 1.125rem;
  33. }
  34. }
  35. /* iphone6 7 8 */
  36. @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
  37. body {
  38. background-color: #0FF000;
  39. font-size: 1rem;
  40. }
  41. }
  42. /* iphone5 */
  43. @media screen and (max-width: 320px) {
  44. body {
  45. background-color: #0FF000;
  46. font-size: 0.75rem;
  47. }
  48. }
百分比布局

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

</>复制代码

  1. /* pc width > 1100px */
  2. html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
  3. aside {
  4. width: 10%;
  5. height: 100%;
  6. background-color: red;
  7. float: left;
  8. }
  9. main {
  10. height: 100%;
  11. background-color: blue;
  12. overflow: hidden;
  13. }
  14. /* ipad pro */
  15. @media screen and (max-width: 1024px) {
  16. aside {
  17. width: 8%;
  18. background-color: yellow;
  19. }
  20. }
  21. /* ipad */
  22. @media screen and (max-width: 768px) {
  23. aside {
  24. float: none;
  25. width: 100%;
  26. height: 10%;
  27. background-color: green;
  28. }
  29. main {
  30. height: calc(100vh - 10%);
  31. background-color: red;
  32. }
  33. }
  34. /* iphone6 7 8 plus */
  35. @media screen and (max-width: 414px) {
  36. aside {
  37. float: none;
  38. width: 100%;
  39. height: 5%;
  40. background-color: yellow;
  41. }
  42. main {
  43. height: calc(100vh - 5%);
  44. background-color: red;
  45. }
  46. }
  47. /* iphoneX */
  48. @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
  49. aside {
  50. float: none;
  51. width: 100%;
  52. height: 10%;
  53. background-color: blue;
  54. }
  55. main {
  56. height: calc(100vh - 10%);
  57. background-color: red;
  58. }
  59. }
  60. /* iphone6 7 8 */
  61. @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
  62. aside {
  63. float: none;
  64. width: 100%;
  65. height: 3%;
  66. background-color: black;
  67. }
  68. main {
  69. height: calc(100vh - 3%);
  70. background-color: red;
  71. }
  72. }
  73. /* iphone5 */
  74. @media screen and (max-width: 320px) {
  75. aside {
  76. float: none;
  77. width: 100%;
  78. height: 7%;
  79. background-color: green;
  80. }
  81. main {
  82. height: calc(100vh - 7%);
  83. background-color: red;
  84. }
  85. }
图片自适应

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

</>复制代码

  1. img {
  2. max-width: 100%;
  3. height: auto;
  4. }

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

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

flex,grid,绝对布局,BFC

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

最后

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

viewport

媒体查询

字体单位

百分比布局

图片自适应

flex,grid,BFC,绝对布局等常用技巧

查看demo

查看源码,欢迎star

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



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113699.html

相关文章

  • Are you sure you understand the responsive layout?

    摘要:我们推荐使用作为字体单位默认情况下我们标签的为,我们可以利用媒体查询,设置在不同设备下的字体大小百分比布局用过的同学都知道,它里面有个栅格系统,说白了就是利用百分比来定义我们元素宽高,而不直接使用。 曾几何时我认为使用了媒体查询就是响应式布局,这种理解实在是太浅薄了,今天就让我们重新来认识下什么是响应式布局 查看demo 查看源码,欢迎star 什么是响应式布局 前几年风靡一时Boot...

    longshengwang 评论0 收藏0
  • [译]CSS Grid, Flexbox 和 Box Alignment:网页布局的新系统

    摘要:原文标题原文链接在网页上布局是很费劲的。的新值和都是属性的新值。再一次,很明显地看到,布局有一些默认的行为。在网格布局中我们可以看到相同的效果。在这种情况下,容器的高度由项的最大高度决定。我们可以将项按照列摆放而不是行。 原文标题:CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 原文链接:https...

    Alan 评论0 收藏0
  • 从web现状谈及前端性能优化

    摘要:从现状谈及性能优化原文出处性能优化指南如今网络发展迅猛,这对我们构建的互联网平台要求也更高。这就说明,我们在开发时,并没有站在用户的角度上换位思考,更别谈性能优化。因此,我们可通过区分关键资源并调整加载的优先级来实现性能优化。 从web现状谈及性能优化 原文出处:《Karolina Szczur: The State of the Web》 性能优化指南The Internet is ...

    paney129 评论0 收藏0
  • 从web现状谈及前端性能优化

    摘要:从现状谈及性能优化原文出处性能优化指南如今网络发展迅猛,这对我们构建的互联网平台要求也更高。这就说明,我们在开发时,并没有站在用户的角度上换位思考,更别谈性能优化。因此,我们可通过区分关键资源并调整加载的优先级来实现性能优化。 从web现状谈及性能优化 原文出处:《Karolina Szczur: The State of the Web》 性能优化指南The Internet is ...

    young.li 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<