html5响应式布局是什么,css移动端响应式
最近写了第三个移动终端H5项目，准备记录一下我在H5项目中的一些实践探索。移动H5和PC开发的最大区别之一可能是响应式布局问题。
因此，让我们来谈谈移动终端的响应式布局，了解其来龙去脉，并探索可用的最佳解决方案。
问题
全文将重点讨论以下问题：
与PC端相比，在移动端编写H5相关页面有哪些值得注意的地方？
关于H5 响应式布局有哪些解决方案？
什么是 rem？如何在项目中完美使用它？
vh/vw 是最佳解决方案吗？它有什么优势和缺陷大型开源库里面常用解决方案是什么？
怎样快速搭建一套移动端布局解决方案？
由来
概念
什么是 H5 技术？
H5这个名字本身就是一个尴尬的名字。乍一看，HTML5，或者说五级标题的标签，似乎引起了一些误解。
例如，我的一个后端同事非常简单地谈到了H5。之前也学过一些HTML。如果你以后请假，我帮你写。
我被蒙蔽了，H5===HTML？
再看看，搜索引擎中的H5是什么？(引自谷歌词条首页)
所以，有很多人把H5当成HTML，而H5这个概念在中国是独一无二的，所以外国人也觉得是HTML。所以外国人和不在这个领域的人都有同样的误解。
目前，H5是一个比较大的概念。我认为H5技术是一系列移动端 web 前端技术的集合，大致用韦恩图表示如下
我们只说web前端的H5技术，用于移动端的 web 网页。由于App本身有一个“webview”容器，可以在其中运行web前端相关代码，所以Hybrid App 技术是由H5和原生App结合而成的。
Hybrid App 技术大致原理
这是我为了给公司同事普及H5知识而画的图。
移动端 web 和 PC web 的区别
我们如何布置电脑？一般采用两种方案，一种是min-width限制最小宽度，宽度小于min-width时浏览器可以直接滚动。另一种是留白。设置页面的基本宽度，多余部分留白。
但是这两种方案在移动端可行吗？
手机宽度大多不一致，没有办法缩放窗口。让移动端滚动，体验就更差了，更何况基本的页面显示体验相比native app性能已经很差了。
留白呢？已经不可行了。手机设备本身宽度就小，留白的话几乎什么都看不到。
因此，为了让这种web体验像native app一样，H5科技出现了。从Hybird进一步导出。虽然比不上app的性能，但在热更新上有着绝对的优势，是native无法替代的。
让我们练习一下H5最基本的技术之一，移动端响应式布局。
实践
解决方案1: rem pxToRem概念
css中用于度量的单位有两个，一个是绝对单位，另一个是相对单位。
绝对单位
对于绝对单位，一般使用px，其他可能的打印需要使用。
相对单位
对于相对单位，em和rem属于一对，vw和vh属于一对。
第一对是相对于字体大小，区别是rem相对于根字体。控制整体大小对我们来说相对容易，所以我们可以用它来控制整个页面的缩放比例。
相对于窗口的大小，后一对将在下一节中扮演主要角色。
原理
监控屏幕窗口的宽度，通过一定的比例转换赋给html的字体大小。此时，根字体大小会随着屏幕宽度而变化。将px转换为rem有两种通用方案。一种是在sass/less中使用用户自定义函数pxTOrem，在写PX时使用pxToRem函数将其转换为rem。另一种是直接写px，编译过程中所有插件都转换成rem。这样，dom中元素的大小会随着屏幕宽度而变化。实现
更新动态根字体大小
Const MAX_FONT_SIZE=420//定义最大屏幕宽度document . addevent listener( domcontentloaded ，()={ const html=document . query selector( html )let FONT SIZE=window . inner width/10 FONT SIZE=FONT SIZE MAX _ FONT _ SIZE？max _ font _ size:font size html . style . font size=font size px })px到rem
PxToRem方案1
$ root fontsize:375/10；//定义函数@ function PX 2 REM($ PX){ @ return $ PX/$ root fontsize REM；}.demo { width:px 2 rem(100)；身高：px 2 rem(100)；}pxToRem方案2
在vue-cli3中配置安装postcss-pxtorem插件就够了，其他平台也差不多。
const autoprefixer=require( autoprefixer )const px torem=require( post CSS-px torem )module . exports={//.css: { sourceMap: true，Loader Options:{ post CSS:{ plugins:[AutoPrefixer()，PXTOREM ({root value: 37.5，proplist: [*]}}}点击可快速配置H5项目。
继续探索postcss-pxtorem插件的源代码，看看它是如何工作的。
function createPxReplace(root value，unitPrecision，minPixelValue){ return function(m，$1) { if(！$1)返回m；var pixels=parse float($ 1)；if (pixels minPixelValue)返回m；var fixedVal=toFixed((像素/根值)，unit precision)；return (fixedVal===0)？“0”:fixed val“rem”；};}px转换成rem主要就是这个功能。当然，这里面有很多可配置的参数。核心原理类似于我们的方案1。方便的是不用每次写px都加一个函数，代码清晰很多。
不是所有元素px都要换算成rem吗？那不一定。border里的px该不该转换成rem，这又涉及到一个1px的问题。上一篇文章详细讨论过，避免把px转换成rem，把border里的px写成PX/Px/pX。
对于1px自适应，请移至移动终端1px。
解决方案二：vh + vw
原理
Vw是窗宽的单位，随宽度而变化。从这个角度来看，第一种方案其实是对第二种方案的一种黑客攻击，第二种方案的效果是利用监控来达到的。
实现
类似于rem，可以直接使用postcss-px-to-viewport插件进行配置，配置方法类似于postcss-pxtorem。
我们来看看插件的原理是不是一样的。
function createPxReplace(opts，viewportUnit，viewportSize) { return function (m，$1) { if(！$1)返回m；var pixels=parse float($ 1)；if (pixels=opts.minPixelValue)返回m；var parsedVal=to fixed((pixels/view portsize * 100)，opts . unit precision)；return parsedVal===0？“0”:parsedVal viewport unit；};}果然，连方法名、变量名、代码逻辑都是一模一样的。哈哈哈如果谁抄袭我就不指出来了-
其他解决方案
缺陷1%高度不能是% 2介质查询。meta中不同的视口有不同的宽度，所以缩放比例不能完全确定。3 flex还是解决不了宽度超标的问题。
以上方案都有致命缺陷，不建议完成移动终端的布局计算。
结合flex，更好。
兼容性
以上两个方案，兼容性主要在于 rem，vh，vw 关键词上
Rem在移动端的表现高达100%，太神奇了！
Vh大众的表现还是比较令人满意的。safari较低版本的情况下会有兼容性问题，但会成为更好的移动布局解决方案。
开源库解决方案
vant 组件库
在vant组件库中，默认情况下使用px作为度量单位。如果需要rem，可以直接用插件完美适配。
对于vw方案，vant也可以通过插件把px转换成vw，对于vw可能会有一些坑。
ant-design-mobile 组件库
ant-design-mobile组件库仍然使用px单位。
@ HD:1px；//基本单位//font size///-@ font-size-I context:10 * @ HD；@ font-size-caption-sm:12 * @ HD；@ font-size-base:14 * @ HD；@ font-size-subhead:15 * @ HD；@ font-size-caption:16 * @ HD；@ font-size-heading:17 * @ HD；//圆角///-@ radius-xs:2 * @ HD；@ radius-sm:3 * @ HD；@ radius-MD:5 * @ HD；@ radius-LG:7 * @ HD；@ radius-circle:50%；//Border size///-@ Border-width-sm:1px；@ border-width-MD:1PX；@ border-width-LG:2 * @ HD；就像vant组件一样，由开发者决定使用哪种方案，这是开源库最灵活的方式。
总结
通过这篇文章，你大概知道了H5问题的来龙去脉，以及如何解决移动终端响应式布局问题。如果这篇文章能解决你在工作中的疑问或问题，不妨存到点个赞。
由于技术水平有限，文章如有错误，请在评论区指出。谢谢大家！
上一篇解决了1px 问题。这篇文章解决了响应式布局的问题。接下来，我应该继续学习关于 H5 一些踩坑总结。之后我要先学习vue 最新的源码再分享。想持续了解更多，不妨点关注。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。