到底什么是响应式布局
Posted 衣冠小禽兽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了到底什么是响应式布局相关的知识，希望对你有一定的参考价值。
做移动端的前端，接到的需求中肯定离不开响应式布局，那么到底什么是响应式布局，其实现的原理在哪，我个人的看法如下：
1.目的：在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够适配多个终端
2.由于响应式布局多是针对移动端，所以首先要在<head>标签中添加下面这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面
3.宽度百分比，也就是所谓的流式布局，用法很简单，但缺点是显示出来的一些页面元素宽度被拉的很长，但是高度还是和原来一样，所以看起来非常的不协调
4.媒体查询，即针对不同的屏幕尺寸设置不同的样式，它告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写：
@media only screen and (max-width:980px){ #head { … } #content { … } #footer { … } }
或者
<link rel="stylesheet" href="style.css" media="only screen and (max-width:980px)"/>
如果兼容的终端类型多了，就要多写几个@media或者引入多个<link/>标签
5.rem，通过根元素进行适配的（只参照<html>中的font-size，和<body>没有任何关系），这主要是针对响应式字体，可以写成：
@media only screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media only screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media only screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media only screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media only screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media only screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media only screen and (min-width:800px){html{font-size:25px}}
注意：上面是先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置
6.完全适配，如果要所有设备分辨率都能兼容适配，可以通过JS去动态计算根元素的font-size，代码如下：
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘; console.log($("html").css("font-size")); }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded‘, recalc, false); })(document, window);
注意：我所在公司的UI给的是750宽度的设计图，所以在该屏幕尺寸下的根元素的font-size是100px，然后直接将设计图中具体部位的尺寸大小除以100就可以得到对应的rem值，即完成了从px到rem的换算；
如果现在的屏幕尺寸是375（iphone 6），是750的一半，也就是说，设计图里指定宽度为200px(对应的width值为2rem)的地方，现在放在iphone 6上就显示为100px，但对应的width值还是2rem，所以只需要给该元素添加width:2rem，就实现了宽度的全适配
7.背景图片，具体请参考background-size这个新属性
以上是关于到底什么是响应式布局的主要内容，如果未能解决你的问题，请参考以下文章
spring5中的响应式编程框架webflux，到底是什么东西啊？