移动端网页开发三(纠结适配的那些年)

  前面两篇文章介绍了移动端网页开发所要具备的基础知识。

  今天着重来讲解移动端的适配方案。

  做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的。而移动端基本是没有兼容问题的,全是css3,简直不要太开心。

  但是最明显的是适配问题。

  

  什么是适配呢?做PC页面的时候,我们按照设计图的尺寸来就好,这个侧边栏200px,那个按钮50px。可是,当我们开始做移动端页面的时候,设计师给了一份640px的设计图。那么我们如何把这份设计图实现在各个手机上的过程就是适配。

  

  我所接触过的适配方法,目前是三种,如果有朋友知道更多的,麻烦请补充指教,可以发送到本人邮箱[email protected],共同学习共同进步。

  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 为单位。  

  

  原理:

  

  1. 动态生成 viewport
  2. 屏幕宽度设置 rem的大小,即给<html>设置font-size
  3. 根据设备像素比(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,谢谢!

  

  

  

  

时间: 2024-10-19 22:17:12

移动端网页开发三(纠结适配的那些年)的相关文章

移动端页面开发及传统PC端网页开发的异同

   2017年12月份在公司做过一次技术分享,转眼间过去六个月了.... 今天在感叹完时间的飞逝之后,拿过来在这里分享一下吧,话题是:移动端页面开发及传统PC端网页开发的异同,这个ppt是搜集网上众路资源(包括视频课程)加上自己的理解总结的.如若有误,欢迎指正哦- 原文地址:https://www.cnblogs.com/catherLee/p/9118406.html

移动端网页开发所要具备的基础知识二(视口)

做移动端网页,首先必须了解一些基本的概念. 最重要的是了解像素和视口. 我在上一篇文章中已经介绍了像素,这次我们再来谈谈视口. 视口 桌面浏览器中,浏览器窗口就是约束你的css布局视口(又称初始包含块).它是所有css百分比宽度推算的根源,它的作用是给css布局限制了一个最大宽度,视口的宽度和浏览器视口宽度一致. 但是在移动端,情况就很复杂了. 1??布局视口(layout viewport) 浏览器厂商为了让用户在小屏幕下网页也能很好地显示,所以把视口宽度设置地很大,一般在768px~1024

移动端网页开发的一些解决方法【转】

网上看到一片好文,转载保留 高性能 CSS3 动画 尽可能的让动画元素不在文档流中,以减少重排 position: fixed; position: absolute; 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3

手机浏览器都是按照什么分辨率解析移动端网页的

无论是公司项目还是合作项目有时候都需要一些移动端网页开发的任务,比如扫描二维码之后或者内嵌到客户端里面的页面,等等. 本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议. 在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读"移动端网页开发基础". 各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句: <meta name="viewport" content="width=d

iOS WKWebview 网页开发适配指南

iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们咨询. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的支持最新Webkit功能的网页浏览控件,摆脱过去 UIWebView的老.旧.笨,特别是内存占用量巨大的问题.它使用与Safari中一样的Nitro JavaScript引擎,大大提高了页面js执行速度. 切换方

Java企业微信开发_09_身份验证之移动端网页授权(有完整项目源码)

注: 源码已上传github: https://github.com/shirayner/WeiXin_QiYe_Demo 一.本节要点 1.1 授权回调域(可信域名) 在开始使用网页授权之前,需要先设置一下授权回调域.这里瞬间想到之前做JSSDK的时候,也设置过一个域名.二者本质上都是设置可信域名. 当用户授权完毕之后,请求将重定向到此域名(或者子域名)下的执行者(jsp页面或者servlet等).如何设置授权回调域,请见第二节. 1.2 获取Code https://open.weixin.

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

支付宝H5 与网页端支付开发

在日常生活中,我们基本上都是进行微信与支付宝的支付方式尽心支付,这种方式确实大大便利了我们的生活,那么如何在我们的产品中进行微信与支付宝支付的植入开发呢? 我们先进行支付宝的H5与网页端支付开发 支付宝的开发配置地址:https://openhome.alipay.com/ 进入开发者中心--->选择研发服务进行我们沙箱环境配置(测试环境) 沙箱环境会为我们提供如下信息进行仿真测试 还有我们需要的:------里面的一些秘钥,进去之后支付宝会提供我们工具,傻瓜式生成就行 接下来我们进行java程

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了.本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧 内容有些长,这也是我第一次写博客,不足之处还请严厉指出 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的