移动端web布局方案的知识总结

付永刚发布于2019-08-29 12:29 / 2375人阅读

摘要：做移动端开发时，我自己了解了种方法，我觉得目前适合我的方法就是用来作单位，配合新的属性来适配屏幕做开发。以上内容为笔者总结的一些移动端开发布局的小知识，笔者知识技能有限，文章若有理解错误的地方还请读者理解并指出，笔者会虚心学习。

做移动端web开发时，我自己了解了4种方法，我觉得目前适合我的方法就是用rem来作单位，配合h5新的meta属性来适配屏幕做开发。
首先介绍一下meta标签

name="viewport"是来告诉浏览器这个meta属性是设置设备视口的
content=""是设置视口的具体内容
width=device-width这段代码告诉浏览器，页面的宽度就等当前设备的视口宽度，
initial-scale=1,代表初始的页面缩放比例为1，
minimum-scale=1代表缩放的最小比例为1,
maximum-scale=1代表缩放的最大比例为1
user-scalable=no代表不允许用户进行手动缩放。

在做开发时，尽量把minimum-scale=1,maximum-scale=1带上，因为有些第三方工具会让页面缩放,加上这两个时，代表最小缩放比例为1，最大缩放比例也为1，那就是不让用户进行缩放。接下来说缩放比例，即就是你写的css里的1px在屏幕上显示也是1px的宽度，这就是1:1的缩放比例关系，当你在移动设备上做开发时，为了能让用户在屏幕上看的更加清晰，这时Retina屏来了，他会把画布的大小放大到原来的2倍，也就是说现在我写的css里的1px在屏幕上展示的是2px的宽度。在平时开发的时候我想要设置1px的边框，总不可能在css里写0.5px吧，所以为了让1px的宽度在屏幕上显示也是1px的宽度，就只能去对页面进行缩放，也就是让
这里先用0.5来说。
当缩放比例为1时，也就是我们来看看这段代码的运行结果。

运行结果：

当缩放比例为0.5时，也就是，我们来看看这段代码的运行结果。

这时边框也能满足我们的需求1px了。但是0.5哪里来的呢？别急，请看下面，咱们在开发时，有没有注意这里的2.0

这就是缩放比，电脑屏幕缩放比为1:1，移动设备就不一样了。大家可以看切换设备看看各种手机的缩放比。前面用的0.5，就是缩放比分之一得到的。我们在做开发时，把meta里的各种缩放比例改成缩放比分之一就行了，但是我们又如何获取各种设备的缩放比呢，放心，js里面已经有了获取屏幕缩放比的属性了，window.devicePixelRatio,比如iphone5的这个值就是2等等。这样有了缩放比。我们就可以通过js动态设置meta标签和里面的缩放比了，有了这些内容，我们就能在屏幕上做到1px显示1px的显示了。有了这些，我们就能用我今天所要介绍的第一种方法也是我最喜欢用的方法rem布局。
1rem就是1个根元素的字体大小，也就是说html设置为20px,1rem就是20px;rem是相对于根元素html的，而em是基于父元素字体大小的。
像素还原到1:1后，我们拿宽为640的设计稿，iphone5的屏来适配，此时我们就可以按照稿子进行原模原样的切图，也就是设计稿某区域切出来时为多少px，css就写多少px。最后我们把px全部转换为rem，比如html的font-size大小是20px,div的宽度是100px,我们就可以把100px写成5rem。就这样一直切完整个设计稿，终于完成了切图，布局。（弹性盒子布局很强大，建议去看看）但是当我们换一个设备比如说iphone6p时，页面布局又乱了，这是因为我们设置的html根元素的字体大小没变，而屏幕大小变了，导致布局变乱了，那么我们就要根据屏幕的大小动态的改变根元素的字体大小就行了。接下来看这段代码，带有注释

加上上面的代码之后，就能应用在任何尺寸不同的设备上了。
下面介绍另外三种布局方式，目前我不喜欢用这些，未来可能会混合用到
1，定死页面宽度，直接写一个div把宽度订到设计稿的宽度或者你需要的宽度，然后让它居中，再在这个div盒子里进行你的页面开发，这种开发的缺点就是当遇到较大的屏幕时，屏幕的两边会流出白边，影响美观，体验不好。
2，利用百分比进行开发，把元素的高度固定，宽度给百分比，缺点就是在大屏幕上，元素的宽度被拉伸，导致宽高比例不协调，不够美观。
3，利用响应式布局，根据不同的屏幕宽度，用不同的css样式,这个方式代码量大，比较复杂，不适合页面布局复杂的大型网站，反而在博客，个人网站等比较小的网站上效果很好。

以上内容为笔者总结的一些移动端开发布局的小知识，笔者知识技能有限，文章若有理解错误的地方还请读者理解并指出，笔者会虚心学习。

GPU云服务器云服务器 web移动端布局移动端布局移动端适配方案移动端web

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111936.html

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
移动端web布局方案的知识总结

摘要：做移动端开发时，我自己了解了种方法，我觉得目前适合我的方法就是用来作单位，配合新的属性来适配屏幕做开发。以上内容为笔者总结的一些移动端开发布局的小知识，笔者知识技能有限，文章若有理解错误的地方还请读者理解并指出，笔者会虚心学习。做移动端web开发时，我自己了解了4种方法，我觉得目前适合我的方法就是用rem来作单位，配合h5新的meta属性来适配屏幕做开发。首先介绍一下meta标签 ...

rainyang 2019-08-20 16:09 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0