Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 响应式设计中相对单位学习和探讨
Blogger Information
Blog 54
fans 6
comment 31
visits 107498
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
响应式设计中相对单位学习和探讨
吾逍遥
Original
1188 people have browsed it

一、学习的新知识

现在多端需要响应式设计，页面能适应手机、平板、电脑和大屏设备进行自适应。在我的作业https://www.php.cn/blog/detail/24434.html已经详细分析了em和rem联系与区别，在作业https://www.php.cn/blog/detail/24548.html演示了em和rem的应用。今天又接触了新的知识。

  • 相对单位vw、vh、vmin和vmax 它们都是相对于视口view(浏览器窗口中用来显示文档的可视区域, 不包括地址栏,菜单,工具条,状态栏,控制台)相对单位。决定了响应式设计中整体布局。
  • 媒体查询@media 通过它识别不同尺寸设备，从而调整尺寸适应。
  • 自定义变量 以2个短横线为前缀即’—‘,如—textcolor:red;

二、字号的相对单位

与字号相关的单位有绝对值px，也有相对单位em和rem。rem(root em的缩写)是根元素的字号大小，而em是元素的字号大小(其中若是用于font-size时则继承父元素)。一般应用建议是：

  1. rem: 用在font-size,设置字号,尽可能不要用在:root
  2. em: 用在依赖字号的属性的上,padding,margin,width, height,border-radius,line-height,text-indent….。应该说者都可以用，不过建议需要响应式的地方使用em更好。
  3. px: border，边框一般不随屏幕而变化宽度。
  4. em应用在设置font-size时要注意多层子元素的递归问题，所以不要随意使用em设置font-size，要少用或不用，除非你是可以预测的，如组件中还是建议使用em，使用rem则导致不灵活，这点以后会再说明。
  1. .panel {
  2.   border: 1px solid lightgray;
  3.   padding: 0.5em 1em;
  4.   background-color: lightgray;
  5.   border-radius: 0.5em;
  6. }
  7. .panel > h3 {
  8.   font-size: 1.3rem;
  9.   margin: 0.2em auto;
  10. }
  11. .panel > p {
  12.   font-size: 1.1rem;
  13.   line-height: 2em; /* 行高 */
  14.   text-indent: 2em; /* 缩进2个字符 */
  15. }
  16. /* 小屏，宽度大于400px */
  17. @media screen and (min-width: 400px) {
  18.   :root {
  19.     font-size: 0.75em;
  20.   }
  21. }
  22. /* 平板，宽度大于800px */
  23. @media screen and (min-width: 800px) {
  24.   :root {
  25.     font-size: 0.875em;
  26.   }
  27. }
  28. /* PC，宽度大于1200px */
  29. @media screen and (min-width: 1200px) {
  30.   :root {
  31.     font-size: 1em;
  32.   }
  33. }

效果 https://codepen.io/woxiaoyao81/pen/QWEGgOb

三、视口的相对单位

  • 视口: 浏览器窗口中用来显示文档的可视区域, 不包括地址栏,菜单,工具条,状态栏,控制台
  • vw: 视口”初始包含块”宽度的 1 / 100
  • vh: 视口”初始包含块”高度的 1 / 100
  • vw: 选择视口宽或高中较小的一个值，如80vmin就是80vw和80vh中最小值。
  • vw: 选择视口宽或高中较大的一个值，如80vmax就是80vw和80vh中最大值。
  1. <style>
  2.     .box{ width: 100vw; height: 30vh; margin: 5px auto; }
  3.     .red{ background-color: red; }
  4.     .green{ background-color: green; }
  5.     .blue{ background-color: blue; }
  6. </style>
  7. <div class="container">
  8.     <div class="box red"></div>
  9.     <div class="box green"></div>
  10.     <div class="box blue"></div>
  11. </div>

效果 https://codepen.io/woxiaoyao81/pen/eYzBRKW

四、响应式设计中相对单位使用小结

通过这几天相对单位的学习，可以说是让我又重新认识了响应式布局，解决了uniapp的UI框架只适应竖屏，对于横屏则显示很不友好。无论是uni-ui还是uview-ui首先都适配了竖屏，对于横屏考虑很少，再一个就是字号相对单位和视口相对单位选择不是很正确，导致组件在具体环境中适应性差。

常见的相对单位和建议应用场景:

  1. 字号的相对单位em和rem： rem用于页面内字号 ，em用于组件内字号，这样组件就能根据容器自适应调整，正是根据这个我对uniapp的UI组件进行了修改，较好适应了横屏和竖屏。
  2. 视口的相对单位vw、vh、vmin和vmax： 多用于整体布局，划分几行几列。不建议用于组件内或局部布局。
  3. 小程序端的相对单位rpx：我觉得rpx是视口宽度单位更进一步细化，vw分为100份，而rpx则将视口分为750份，更精细了。不过rpx只能用于移动端，而且只是针对横向。经测试在PC端直接使用无效。
  4. 百分比%: 相比于vw和vh等，它更适合组件内或局部布局，不建议它进行整体布局。对于横向百分比和竖向百分比的计算规则可见我的作业https://www.php.cn/blog/detail/24548.html的第一节第5小点的分析，由于是个人测试总结，对于百分比认识难免有失误，还望老师和同学们批评

下面源码通过相对单位综合使用实现了类似于Grid布局

  1. <style>
  2. * { box-sizing: border-box; text-align: center; }
  3. body { display: flex; flex-direction: column; justify-content: space-between; }
  5. /* 整体布局:建议使用vw和vh */
  6. .page-head { height: 10vh; background-color: darkcyan; }
  7. .container { height: 75vh; background-color: lightblue; display: flex; }
  8. .page-foot { height: 10vh; background-color: lightsalmon; }
  10. /* 局部布局:建议使用百分比,盒模型相关属性使用em */
  11. .aside {
  12. /* 局部使用vw效果不好 */
  13. /* width: 30vw; */
  14. width: 30%;
  15. height: 100%;
  16. background-color: lightslategray;
  17. background-clip: content-box;
  18. padding: 0.5em;
  19. display: flex;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. .main {
  24. /* 局部使用vw效果不好 */
  25. /* width: 68vw; */
  26. width: 70%;
  27. height: 100%;
  28. background-color: peru;
  29. background-clip: content-box;
  30. padding: 0.5em;
  31. display: flex;
  32. flex-direction: column;
  33. justify-content: space-between;
  34. }
  35. .content {
  36. height: 50%;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. }
  41. .section-box {
  42. display: flex;
  43. height: 50%;
  44. }
  45. .section {
  46. width: 50%;
  47. height: 100%;
  48. background-color: violet;
  49. background-clip: content-box;
  50. padding: 0.5em;
  51. display: flex;
  52. justify-content: center;
  53. align-items: center;
  54. }
  55. </style>
  56. <body>
  57. <header class="page-head"><h3>header</h3></header>
  58. <div class="container">
  59. <aside class="aside"><h3>aside</h3></aside>
  60. <main class="main">
  61. <div class="content"><h3>main</h3></div>
  62. <div class="section-box">
  63.     <section class="section"><h3>section</h3></section>
  64.     <section class="section"><h3>section</h3></section>
  65. </div>
  66. </main>
  67. </div>
  68. <footer class="page-foot"><h3>footer</h3></footer>
  69. </body>

效果图

源码 https://codepen.io/woxiaoyao81/pen/XWKNaqy

五、学习后总结

到这里，相对单位基本学习完了，通过老师讲解演示和自己测试，终于较为系统的认识了相对单位应用场景。可以归纳如下：

  • 字号相对单位多用于盒模型，em用于组件内，rem用于页面或组件外，根据尺寸使用px或rpx来调整，em和rem定义的属性自动相应调整。
  • 视口相对单位vw和vh等，主要用于整体布局。
  • 百分比用于组件内或局部布局，组件或局部灵活适应开发者的布局。

更多源码见我的Github https://github.com/woxiaoyao81/phpcn13和Gitee https://gitee.com/freegroup81/phpcn13

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：非常棒, 下次可以放截图就可以了, 不必放站外地址了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
吾逍遥 2020-10-22 17:29:36
收到，静态直接图片，动态我就放下codepen链接
1 floor
Author's latest blog post