构建自适应的手机页面

itvincent 发布于2019-08-21 10:30 / 1297人阅读

摘要：从事开发好多年，但是手机页面开发较晚，所以最开始的时候，为了做微信应用的开发，各种饿补，但是为了将设计稿精准的适配在各种尺寸的手机上还是太坑，所以找了些资料后，借鉴了一些成熟的网站，分享出来，欢迎拍砖。

从事PC Web开发好多年，但是手机页面开发较晚，所以最开始的时候，为了做微信应用的开发，各种饿补，但是为了将设计稿精准的适配在各种尺寸的手机上还是太坑，所以找了些资料后，借鉴了一些成熟的网站，分享出来，欢迎拍砖。

首先需要你对viewport有一个了解，建议看Apple官方文档，虽然啰嗦，但是啃一遍，基本该明白的就全明白了。

第一种方案

简便易行，适用情况：

网页设计仅针对手机屏幕，并且没有需要根据手机屏幕尺寸进行UI调整的内容，既没有媒体查询的CSS

产品层面可以不考虑非主流设备或浏览器的兼容性，例如黑莓的某些设备或搜狗浏览器这类的不支持640定宽渲染的浏览器

当手机横竖切换时，能够容忍部分手机在横屏浏览网页时，可能出现的问题(潜在问题)。

这个方案是强制让手机浏览器按640的比例来呈现网页，让浏览器去做尺寸适配；这个方案我觉得其实非常好，绝大多数的场景都可以支持，而且开发起来简单高效，不需要考虑各种尺寸和样式表的单位换算问题。

这个方案有点类似css zoom，就是浏览器将整个网页进行了缩放，注意一点：PC端的使用浏览器的开发工具进行缩放的时候，譬如使用iphone 5s 模式预览，可能会有问题，比如border:1px的时候可能会不可见，字体会有些模糊等，但是手机端展现的时候不会出现这些问题，因为绝大多数手机目前屏幕分辨率都足够高，而且专门针对viewport做了处理，所以这个问题可以忽略。

测试地址：点击这里，这个网页就是按640定宽做的，可以在多数尺寸的网页上做适配

第二种方案

上面这个不用解释了，绝大多数知名网站都这么做的.
很多网站为了能够让图片和字体也做自适应，会使用rem来作为单位，然后再启用javascript判定屏幕宽度，动态改变html元素的fontsize。

为了方便计算，通常会默认将html的font-size设置为100px，这样方便计算，例如你的网页字体是16px,只需要写成0.16rem就行了，然后假如设计稿是按640宽度设计，切图的时候完全按设计稿来进行单位换算，然后在js中获取屏幕宽度，根据比例：100/x = 640/documentWidth 计算html的字体大小即可，当然要加入一个window.resize事件重新计算，以防横竖屏切换。

重要：如果你希望字体不缩放，可以不考虑将font-size设置为rem

第二种方案有几个弊端：

由于背景图片无法做缩放，(background-size:cover|contain)只能针对单张图片，而对于sprite css image无力解决，所以这里要求如果有背景图，全部制作成单张的，然后再加上background-size:cover|contain，这里凸显出使用css font的好处了...

页面中的所有单位都需要用rem来计算，虽然 X/100是很简单的计算，但是书写的时候还是让人厌烦。

所有的图片必须指定宽度，不然图片会按原始宽度进行渲染，当屏幕尺寸与设计预期尺寸不一致时，就会出错了。

根据上面的描述，我做了两个工具：

制作时依然采用px作为单位，通过watch插件监听css文件的改变，然后动态转换px2rem。

根据图片生成auto convert css icon文件，类似grunt-sprite，但只生成对应的css，而不合成图片,这样对于将以往的css sprite工具生成的图片可以低成本切换成单一图片ICON 开发思路是这样：

开发时区分目录，例如src表示源码，dest目录标示转换后的静态文件，目前上规模的工程都这么做，应该没什么成本了，然后css依然使用像素作为单位。

通过grunt或gulp插件来监听文件改变，然后做copy,sync之类的处理，同时这里将css中的px按设定的比率转换成rem。

不能在网页中直接嵌入内联style，或者需要自行转换单位之后嵌入。

监听脚本：
(注：这里假定开发的时候依据的宽度的640，默认字体是32像素)

// 根据屏幕宽度适配字体大小
$(window).on("resize", function () {
  var width = document.documentElement.clientWidth;
  $("html").css("font-size", (width / 640 * 32) + "px");
}).triggerHandler("resize");

测试地址：点击这里

(因为我的工程使用的是grunt，所以写的插件也是针对grunt的，如果你打算使用gulp，需要自行实现上面的工具了)

第三种方案

固定高度，宽度自适应

这个方案其实就是原生iphone的方案，既在不同尺寸的屏幕上显示时，宽度会自适应，高度是固定的，字体大小也固定，譬如一个list元素的高度是44px，无论在iphone5,iphone6,iphone6+它都是44px高，但是宽度是不定的，这个其实是一个标准实现方案，既高度确定，内容宽度自适应，字体大小固定。

流行的大公司的H5网站基本都是这么处理的，淘宝在这个方案的基础上额外做了1px的适配，因为在视网膜双倍屏上，实际上使用2px的物理像素来渲染1px的逻辑像素，为了能够做到精准的1px，淘宝没有默认写viewport而是使用js来动态生成viewport。

当然dpr不同，生成的viewport也不一样，双倍屏的viewport是0.5, 3倍屏的是0.33333,所有单位使用rem，js根据不同的倍屏生成一个基础的font-size，单倍屏幕是16px，双倍是32px，3倍是48px，以此类推。

动态生成viewport额外引出两个问题：
1.android的很多机型不支持动态生成的viewport，仅在IPHONE上适配良好，
2.原始的css不能再使用px，而要使用rem作为单位。

第一个问题比较好解决，ua判断好了，第二个问题需要在编写css的时候动态转换rem。

结合到一起：

(新增)：
由于淘宝的方案比较复杂，为了1PX的显示做了非常复杂的处理，所以放弃了。有个折中的办法是对1px的处理做scale缩放，不过这样可能会在dpr为1的屏幕出现问题，或者在dpr>2的屏幕依然会变粗。
不过这个方案简单易行，事实上微信的UI团队用的就这个方案，我参考了他们的解决办法，实现了一套自己的UI：使用默认的1倍缩放viewport方案，不缩放图片和字体，放弃自适应。1px问题采用scale方案解决。图片布局问题采用padding-top百分比宽度解决(可以自行百度)

http://exui.legend.life
https://github.com/whosesmile...

总结

第一个定宽开发的方案其实非常适合小团队做推广页面，因为这样避免了各种工具的整合，降低了开发复杂度。

第二个方案适合需要适应绝大多数尺寸浏览器的项目，同时如果配置好打包工具，可以很大程度降低难度，将开发和部署解耦，开发代码比较清晰。

第三个方案适合对项目精细要求度比较高的，成本稍高。

超融合服务器混合云 asp页面自适应 js页面高度自适应手机html自适应 asp 页面适应手机

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

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

关于响应式设计的一些关键点

摘要：这里使用到的最多的中的属性，即媒体查询响应式设计实践原则渐进增强渐进增强英语是网页设计的一种策略，强调可访问性，语义标记，外部样式表和脚本技术。 1、响应式设计关键点在于：媒体查询、流动网格、弹性图片，而不是flex布局或者是自适应布局响应式和自适应的最直观的区别是：自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，直观地来看就是盒子会根据屏幕分辨率的大小进行伸缩变换。所以...

golden_hamster 2019-08-29 14:17 评论0 收藏0
FineReport中如何安装移动端H5插件

摘要：移动端报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数。另外移动端的插件，图表是只支持显示新图表。 HTML5报表插件安装及使用编辑插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索，这里就不做详细介绍了。移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...

shusen 2019-08-05 11:05 评论0 收藏0
FineReport中如何安装移动端H5插件

摘要：移动端报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数。另外移动端的插件，图表是只支持显示新图表。 HTML5报表插件安装及使用编辑插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索，这里就不做详细介绍了。移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...

bovenson 2019-08-20 15:52 评论0 收藏0
CSS9:动态 REM-手机专用的自适应方案

摘要：一定要强制自己用命令行，强制自己学英语，强制自己看文档。只有这三条都做了，才有可能成为前端水平的程序员。设计师的设计稿宽度需要统一那么相应得，这时会将自动变成宽度为的情况下这样就无需在手动换算的值了。 CSS9:动态 REM-手机专用的自适应方案动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是...

ityouknow 2019-08-02 10:52 评论0 收藏0
CSS9:动态 REM-手机专用的自适应方案

摘要：一定要强制自己用命令行，强制自己学英语，强制自己看文档。只有这三条都做了，才有可能成为前端水平的程序员。设计师的设计稿宽度需要统一那么相应得，这时会将自动变成宽度为的情况下这样就无需在手动换算的值了。 CSS9:动态 REM-手机专用的自适应方案动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是...

joyqi 2019-08-30 15:54 评论0 收藏0