移动端适配问题

孙淑建发布于2019-04-23 13:23 / 2430人阅读

摘要：读设备宽度，动态设置标签的属性中的值网易的做法网易的做法现在的设计稿都是宽度的宽，那要想实现样式设计图这种比较方便的折算方式，就要设置成也就是说总结总结是为了实现移动端自适应布局。

适配问题

怎么适配iphone6
1px问题

为什么页面与设计稿会出现偏差？

dpr=设备像素/ css像素，只有dpr等于1的时候，实际效果和设计稿的尺寸比例才是1:1。

因为iPhone6的DPR（设备像素比）为2，设备像素为750，所以iPhone6的理想视口尺寸为375px。

因为设计稿是基于设备像素，页面是基于css像素的。css中的宽度是基于理想视口的（宽度375px），设计图上是基于设备宽度750px，所以尺寸不对。

怎么处理？

init-scale=0.5 。
缺陷：但是宽度不能自适应

⭐️rem大法

基于html标签的font-size设置的

手淘的做法：

把缩放尺寸设置成dpr的倒数。

读设备宽度，动态设置meta标签的 content属性中的maximun,minimum,user-scable值

网易的做法

现在的设计稿都是750px宽度（p6的宽），那要想实现 css样式：设计图=1：100 这种比较方便的折算方式，font-size就要设置成7.5px；

也就是说1rem = 7.5px

总结

rem是为了实现移动端自适应布局。通过在html元素下设置font-size定义。

另外，手淘的做法是通过判断设备的dpr，将缩放规模scale设置为dpr的倒数，再用js动态设置meta标签的content属性和font-size基准值的大小。

网易的做法是，禁用用户缩放，scale始终为1，将font-size设置为625%，即 1rem=100px。

1px问题

如何实现移动端的1px边框

方法一：`transformY:scale(50%)`

方法二：

border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 图片地址 上下剪切 左右剪切 上下边宽 左右边宽 图片拉伸

vm/vh+rem大法

vm/vh是未来的趋势

rem方式弊端：需要动态计算根字体大小

做法：用vm/vh来计算根字体大小，剩下的自适应布局依旧按照rem的方法

用vm/vh做适配页面

⭐️关于vm/vh

1. 与%百分比的区别

vm/vh 是基于视窗的
%基于父元素

2. 使用场景

随着页面不同，文字图片缩小放大（适配页面）

3. 与rem的区别

vm/vh没有最大、最小宽大的限制（设备很小的时候，图文会缩得特别特别小……）

措施：

1.解决背景过小问题

body{
    min-width:xxx px;
    max-width: xxx px;
}

2.媒体查询限制根文字大小（解决文字过小问题）

html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时，通过Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }

云服务器混合云移动端适配移动端适配方案移动端适配 js 适配问题

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

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

移动端布局与适配

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

Clect 2019-08-29 14:08 评论0 收藏0
移动端适配方案

摘要：业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似，分为移动端页面和端页面，端页面同样有着左右的留白，这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。移动端适配方案移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订好。整体宽高其实移动端适配就和下面的玩具一样，...

feng409 2019-08-30 15:54 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

wangbinke 2019-08-29 16:56 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

tianren124 2019-08-23 12:21 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

dreamGong 2019-08-05 10:23 评论0 收藏0