1, 前言
(1)vw/vh 介绍
在使用之前, 我们先简单了解一下什么是 vw 和 rem 以及它们的作用, vw 是 CSS3 出现的一个新单位, 它是 "view width" 缩写, 定义为把当前屏幕分成一百份, 1vw 即为屏幕的 1%, 与之对应的是 vh, 把高分成一百份, 1vh 即为屏幕高的 1%, 一般我们常用的 vw 单位来完成响应式开发
(2)rem 介绍
rem 是相对长度单位. 相对于根元素(即 html 元素)font-size 计算值的倍数, 比如你 HTML 设置的字体为 20px, 那么页面中的 1rem 就相当于 20px, 举个例子:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <style>
- HTML,h1 { font-size: 12px; } p { font-size: 2rem; }
- </style>
- </head>
- <body>
- <h1>
- 我是 h1 中的文字
- </h1>
- <p>
- 我是 p 标签中的文字, 是 h1 文字的两倍
- </p>
- </body>
- </HTML>
2, 正文
(1)有了上面对这两个单位的了解, 我们就可以通过换算来完成移动端的响应式布局处理, 这里我们用 iPhone6/7/8 的手机为例, 屏幕宽度为 375px.
1vw = 3.75px
(2)好, 现在我们想象下 100px 等于多少 vw 呢? 这里需要计算一下.
100px = 26.6666666vw // 因为是无限循环, 这里取 7 位小数
(3)那么怎么把 rem 和 vw 联系起来呢? 这里我们来写一个小案例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title>
- </title>
- <link rel="stylesheet" href="">
- <style type="text/css" media="screen">
- HTML{ font-size: 26.6666666vw } p{ font-size: 0.2rem; width: 2rem; height:
- 1rem; background: pink; margin: 0 auto; line-height: 1rem; text-align:
- center; }
- </style>
- </head>
- <body>
- <P>
- 我是 P 标签中的文字
- </P>
- </body>
- </HTML>
上面的案例我们把 HTML 中的 font-size 设置为 26.6666666vw, 这代表着 font-size=100px, 然后结合 rem 的特性就实现了前端 CSS 响应式布局
总结: 前端响应式布局有很多种, pc 端的响应式框架也有很多, 移动端的很多框架也自带响应式, 这种方法我觉得也是比较好用的方法, HTML 中的 font-size 大家可以随意设置, 只是换算过来很麻烦, 于是很多方法也就产生了, 很多编辑器有自动换算的功能, 比如我用的 Sublime 编辑器, 网上也有很多在线的网页在线转化, 好了, 以上就是我的使用心得, 如有错误之处, 请大家多多指正!
3, 其他响应式布局介绍
(1)流式布局
流式布局即百分比布局, 例如, 设置网页主体的宽度为 80%,min-width 为 960px. 图片也作类似处理(width:100%, max-width 一般设定为图片本身的尺寸, 防止被拉伸而失真).
布局特点: 屏幕分辨率变化时, 页面里元素的大小会变化而但布局不变.[这就导致如果屏幕太大或者太小都会导致元素无法正常显示]
设计方法: 使用 % 百分比定义宽度, 高度大都是用 px 来固定住, 可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整, 尽可能的适应各种分辨率. 往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读.
这种布局方式在 web 前端开发的早期历史上, 用来应对不同尺寸的 PC 屏幕(那时屏幕尺寸的差异不会太大), 在当今的移动端开发也是常用布局方式, 但缺点明显: 主要的问题是如果屏幕尺度跨度太大, 那么在相对其原始设计而言过小或过大的屏幕上不能正常显示. 因为宽度使用 % 百分比定义, 但是高度和文字大小等大都是用 px 来固定, 所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长, 但是高度, 文字大小还是和原来一样(即, 这些东西无法变得 "流式"), 显示非常不协调.
(2)媒体查询
媒体查询是监听当前屏幕的宽度来响应你对应的设置, 比如 375px 的屏幕字体为 12px,960 的屏幕字体为 18px, 对于简单的页面来说写起来很庞大, 但是对于大型项目来说还是很方便的, 媒体查询有个特点就是比如你从 375px 屏幕缩放到 960px 屏的时候字体或者图片会突然放大, 也算是一种不好的体验吧, 但是实际运用中并没有什么关系.
布局特点: 每个屏幕分辨率下面会有一个布局样式, 即元素位置和大小都会变.
设计方法: 媒体查询 + 流式布局.
总结:
1. 如果只做 pc 端, 那么流式布局 (定宽度) 是最好的选择;
2. 如果做移动端, 且设计对高度和元素间距要求不高, 那么弹性布局 (vw) 是最好的选择, 一份 CSS 调节 font-size 搞定;
3. 如果 pc, 移动要兼容, 而且要求很高那么媒体查询还是最好的选择, 前提是设计根据不同的高宽做不同的设计, 响应式根据媒体查询做不同的布局.
来源: https://www.cnblogs.com/xwkj/p/10308082.html