1、引言
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本（同一页面在不同屏幕尺寸下有不同的布局）。这个概念是为解决移动互联网浏览而诞生的
2、响应式布局解决方案
- 媒体查询
媒体查询可以让我们针对不同的媒体类型定义不同的样式，当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式
常见的分隔点
- 768
- 992
- 1200
- 1920
分隔点不是一成不变的，要随着项目的实际需求的变化而变化，移动端优先使用min-width，pc端优先使用max-width
/* 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 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;
}
}
3、百分比
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果，但是子元素不同属性的百分比的参照物是不同的
- width相对于父元素的width
- height相对于父元素的height
- 子元素的top、bottom、left、right，则相对于直接非static定位(默认定位)的父元素的高度
- 子元素的padding、margin都相对于直接父亲元素的width，而与父元素的height无关
- border-radius、translate、background-size等都是相对于自身的宽度
显然使用百分比进行响应式布局计算会分繁琐，因此在布局时要谨慎使用
4、rem
rem 是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持，rem单位是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准
当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可
rem布局的思想
- 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
- 高度值可以设置固定值，设计稿有多大，我们就严格有多大
- 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
- js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了
- 1rem等于html根元素设定的font-size的px值
/* 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;
}
}
cssrem插件
手动转换px与rem不仅效率低而且容易出错，因此推荐vscode 的cssrem 插件
- cssrem插件是vscode ide 的一款插件，主要实现了在书写代码的时候直接将px转成rem
5、总结
在实际项目中，我们可能需要综合上面的方案，要点如下
- 设置viewport
- 媒体查询
- 字体的适配(rem)
- 百分比布局
- 图片的适配
- 结合flex弹性布局
参考
网友评论