移动端网页开发三（纠结适配的那些年）
前面两篇文章介绍了移动端网页开发所要具备的基础知识。
今天着重来讲解移动端的适配方案。
做PC端页面的工程师聊的最多的是兼容，这是因为浏览器之间的差异引起的。而移动端基本是没有兼容问题的，全是css3，简直不要太开心。
但是最明显的是适配问题。
什么是适配呢？做PC页面的时候，我们按照设计图的尺寸来就好，这个侧边栏200px，那个按钮50px。可是，当我们开始做移动端页面的时候，设计师给了一份640px的设计图。那么我们如何把这份设计图实现在各个手机上的过程就是适配。
我所接触过的适配方法，目前是三种，如果有朋友知道更多的，麻烦请补充指教，可以发送到本人邮箱1211050148@qq.com，共同学习共同进步。
1️⃣固定高度，宽度自适应
2️⃣固定宽度，viewport缩放
3️⃣rem做宽度，viewport缩放
举例说明：
1️⃣固定高度，宽度自适应
示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-height.html
这也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。
随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用_响应式布局_调调就行（比如网易新闻），这样就实现了『适配』。
原理：
这种方法使用了完美视口：
<meta name="viewport" content="width=device-width,initial-scale=1">
2️⃣固定宽度，viewport缩放
示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-width.html
设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。
目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。
原理
这种方法需要根据屏幕宽度来动态生成viewport，生成的viewport基本是这样：
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
640 是我们根据设计图定下的，0.5 是根据屏幕宽度动态生成的。
生成的viewport告诉浏览器网页的布局视口使用 640px，然后把页面缩放成50%，这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。
这个gif图说明了一切：
3️⃣rem做宽度，viewport缩放
示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-rem.html
根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。
原理：
动态生成 viewport
屏幕宽度设置 rem的大小，即给<html>设置font-size
根据设备像素比（window.devicePixelRatio）给<html>设置data-dpr
这么设置的好处是可以让不同设备的rem或px都显示一样的长度。
设置rem
设置rem的意义在于得到一个与屏幕宽度相关的单位，本来vw是最合适的，但是因为兼容性的问题，只能使用rem来做。这样，让不同设备的rem显示一样的长度。
vw是CSS3引入的单位，1vw = 1%窗口宽度
上面的布局我们可以这样：
html{
font-size: 屏幕宽度 / 10;
}
.btn{
width:8.75rem;
height:1.25rem;
}
这样，无论屏幕宽度是多少，.btn都是相对于屏幕的这么宽，做到了适配。
设置 viewport 缩放 和 data-dpr
这两个设置其实是干的一件事，就是适配高密度屏幕手机的px单位。
.a{
font-size:12px;
}
[data-dpr="2"] .a{
font-size: 24px;
}
[data-dpr="3"] .a{
font-size: 36px;
}
而缩放是动态的，这样，不同设备下的px显示一样的长度。
之前说过CSS像素和物理像素与缩放、dpr都有关系，这里说明：
在普通手机上，.a字体设置为12px；
在dpr是2的手机上，[data-dpr="2"] .a字体为24px，又因为页面缩放50%，字体为还是12px
关于这部分适配的JS文件本人有做收藏，因为我觉得还需要细讲一下，所以我准备放在下一篇来讲解。
最后打个广告，欢迎加入本人创建的前端qq群399627992，谢谢！
转载于:https://www.cnblogs.com/JinQingsong/p/6680068.html
移动端网页开发三（纠结适配的那些年）相关推荐
- 移动端网页开发-vh/vw/rem
第一次做移动端网页开发,接触到的几个单位vh/vw/rem,记录一下. vh:相对可见视区的高度 vw:相对可见视区的宽度 rem:相对根元素的字体大小 "视区"所指为浏览器内部的 ...
- 推荐3款移动端网页开发调试神器
web前端教程 用大白话,来讲编程 最近有小伙伴在微信上跟我聊到了移动端网页开发调试困哪的问题,这个相信很多前端开发者都遇到过. 有一天,测试妹子拿着测试手机过来找你,说页面打不开. 你心想:怎么可能 ...
- 移动端网页开发)------响应式网页
移动端网页开发 移动端网页开发的两种方案: 响应式网页 开发一个新的网站.使用移动端的布局方式. 响应式网页 概念 同一个网页会根据视口的不同,显示不同的样式. 优缺点 优点 面对不同分辨率的设备比较 ...
- 移动端html怎么调试工具,移动端网页开发调试神器Eruda的介绍与使用技巧
前言 众所周知,我们在做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求.显示本地存储等信息.如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打 ...
- 轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言 从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
- 移动端网页开发（一）
一.项目代码初始化 1.打开index.html将<meta></meta>标签补充完整 <html><head><meta charset=&q ...
- 移动端/PC端网页开发建议
作者:黄玄 链接:https://www.zhihu.com/question/25836425/answer/31564174 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- 移动端web开发——像素的适配
像素和dpr 定义 像素,又称画素,是图像显示的基本单位,译自英文"pixel",pix 是英语单词 picture 的常用简写,加上英语单词"元素" elem ...
- 如何进行移动端页面开发
应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上"舞台".当时的移动互联网开始逐渐兴起,发展到今,移动 ...
最新文章
- sap abap在表VBAP和VBAK上增加新字段的标准BAPI
- 普及vmware连接上网
- 产品经理必懂的技术那点事儿 pdf_培养一个合格的产品经理需要多少钱？
- 数据仓库的ETL、OLAP和BI应用
- STM32F103_IWDG独立看门狗
- 微信小程序05 事件绑定与事件传参
- optim优化器的使用
- sw2014计算机配置,solidworks配置要求高吗，solidworks需要什么样的电脑配置
- UI设计APP金刚区，卡片式设计
- linux怎么设置wifi密码,技术|怎样在 Arch Linux 终端上更改 WiFi 密码
- Vivo（IQOO）无法输出调试日志解决办法
- 3、需求调研 - 产品管理系列文章
- linux ubuntu配置要求,Ubuntu Server 14.04和Kylin 14.04 Enhanced Release amd64最低硬件配置要求...
- 个人常用VScode插件及其配置
- 模拟电子技术基础实验6.5
- 思迈特软件Smartbi：10分钟教会你制作高难度的数据地图！
- 多媒体个人计算机能处理什么,多媒体计算机可以处理的信息类型有什么？
- spine教程入门（不错的教程博客）
- 抽取游戏礼包中的物品的常见逻辑
- http://www.google.com/ncr 谷歌无限制搜索方法，用过都说好