谈谈移动端屏幕适配的几种方法

移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力。在使用了腾讯优测进行软件测试后,问题得到了有效解决。

响应式布局

简而言之,就是页面元素的位置随着屏幕尺寸的变化而变化,通常会用百分比来定位,而在设计上需要预留一些可被“压缩”的空间。

如上图,其实就相当于页面被压矮了。

Cover布局

就跟background-size的cover属性一样,保持页面的宽高比,取宽或高之中的较小者占满屏幕,超出的内容会被隐藏。此布局适用于主要内容集中在中部,边沿无重要内容的设计。

如上图,第一张是原设计稿,第二张把左右隐藏掉了一部分,第三张则是把上下隐藏掉了一部分。

Contain布局

同样,也跟background-size的contain属性那样,保持页面的宽高比,取宽或高之中的较大者占满屏幕,不足的部分会用背景填充。个人比较推荐用这种方式,但在设计上需要背景为单色,或者是可平铺的背景。

如上图,红框部分为原始宽高比,根据不同屏幕尺寸进行缩放,并加背景填充。

好了,接下来再说说常用的实现方法吧。

样式缩放

最省事的适配方法,直接用px为单位按视觉进行开发,然后通过计算屏幕与网页的宽高比,用transform:scale来对网页进行全局缩放。

不过此方法会有一个小问题,就是如果网页内有动画的话,缩放后会稍微降低页面性能,在低配的安卓机器上表现的比较明显,iOS上没发现有性能问题。

Rem缩放

Rem是个好东西呀,谁用谁知道,这里就不多做解释了。原理跟上面的样式缩放相通,只不过是通过Rem为单位来进行视觉开发,然后通过计算后改变html的front-size来对页面进行缩放。

关于以Rem为单位进行开发,目前比较流行Font-size=62.5%,而后1rem=10px的这种方法,有试过直接换成px也是可以的,就看个人的计算习惯吧。

时间: 2024-11-03 22:11:07

谈谈移动端屏幕适配的几种方法的相关文章

iOS里面的屏幕适配(两种方法)

第一种方法:进行等比缩放 适用于只有单个或者很少的页面需要适配的时候 第二种方法:用别人已经封装的类,进行屏幕的适配 适用于多个页面都需要进行屏幕适配 这是在ViewController.m里面的代码

移动端屏幕适配原理以及方法讲解

序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了,因为下周我有个关于移动端适配的演讲.人生这么短暂,我却把有限的时间奉献到了无限的前端道路上. 根据我不(cong)太(ming)灵(jue)活(ding)的大脑的努力思考.我发现现阶段比较流行移动端适配原理只有一个--就是对元素进行放大和缩小,具体到执行的时候方法有两个(求不打脸). 1个是网页大

设置一个DIV块固定在屏幕中央(两种方法)

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT

打开网络适配的两种方法

打开网络适配有两种方法 第一种是在Info.plist文件里添加XML代码 具体步骤:右击Info.plist文件 选择Open As里面的Source Code 然后在文件底部插入下面代码 [html] view plain copy <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict> 第二种

iOS屏幕适配的几种方式

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策);(2)Autoresizing的使用(中策);(3)AutoLayout的使用(上策);(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据屏幕宽高写控件frame 利用宽高比,在不同的屏幕中来进行对控件的位置与控件的宽高进行等比例缩放.选定一个型号的屏幕的宽高为基准,进行等比例缩放.例如以iPhone6或者iPhone6s为基准. 其宽高分别是375与667.Iphon

前端关于移动端屏幕适配

1.先谈一下几个概念 像素是度量的单位,可以理解为点 1.css像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 在不同设备中1css像素对应不同的设备像素(物理像素) 例如:iphone3分辨率是320*480 即 css 1px = 1个物理像素:iphone4 分辨率640x960但屏幕尺寸没有改变,意味着同一块区域像素多了1倍 即 css 1px =2个物理像素: 2.物理像素 表示每英寸所拥有的像素数目,数值越高,代表屏幕能够以更高的密度来显示

移动端屏幕适配方案

本文来源:http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=201811994&idx=1&sn=1c3bae60e2fe13d3bc3aeecaa6a4ef00&scene=23&srcid=abqLbfgvESx4DGNysdG8#rd pc上的网站在移动端上怎么办? 1:如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱: 2:所以浏览器默认把viewport设置为一个较宽的值

h5移动端屏幕适配

1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&

HTML5工具做屏幕自适应的两种方法

近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设备进行动态的适配.例如,用iPhone4.iPhone5.iPhone6.PC.iPad访问同一个H5网页,都能打开一个适合该设备的一个HTML5页面,不留白边,不变形. 由于设备分辨率和长宽比都不同,如果设计一次就能适应所有的屏幕(包括移动端和PC端),几乎不可能.原因有三: 1. 如果等比例缩放