Css-移动端适配总结
前言
工作以后,大部分的业务工作都是基于移动端H5的,开发过程中学习了很多东西,遇到过许多问题,诸如rem\em\css px\device px等,本文纯属个人的归纳总结,如有问题,请指出亲喷~
PC端
本文主要是讲解移动端的响应式布局, 但是在真正进入之前, 先了解一些概念。
device px(设备像素)和 css px(css像素)
通常在PC端上面,我们并不需要考虑设备像素和css像素
之间的差别,以目前的pc来看,1个设备像素通常等于1个css像素
。可以使用screen.width/height
来获取我们屏幕的宽高设备像素。
screen.width // 1920
screen.height // 1080
如果你给一个元素的宽度为width: 192px;
那么你的屏幕上(假设你的屏幕宽度像素为1920)可以在一行上显示10个该元素。原理则是因为我们的PC中1个设备像素等于1个css像素。
当用户放大或者缩小屏幕时(按住ctrl+滚动鼠标轮,也就是改变zoom值
),则有所不同。此时,我们的设备像素仍然没有改变,还是1920*1080,css像素的数量也没有改变,但是css像素大小变了
。 假设放大到200%, 那么1个css像素就等于两个设备像素
, 以此类推。
以下是引用ppk大神
的三张图片, 下面深蓝色为设备像素, 上面浅蓝色为css像素
正常情况下:
缩小时:
放大时:
screen.width/height 和 window.innerWidth/innerHeight
screen.width/heihgt
取的是屏幕的宽高,单位是是css像素。
window.innerWidth/innerHeight
取的是网页区域的宽高, 单位是css像素。
当你改变zoom值时, screen不会改变, innerWidth/height会改变
。
viewport的概念
viewport
是一个限制html
元素的功能, 可以理解为html
元素的上一层元素。听起来有点难以理解, 下面讲一个例子:
假设, 你给某个div
元素设置了width:50%
的样式后, 当你缩小放大浏览器的时候,你会发现div元素总是占据了50%的宽度,我们知道,宽度百分比是依赖它的包裹元素
(假设是body), 那么问题就回到了body的宽度身上。通常在没有设置宽度的情况下,所有块级元素都占用其父级宽度的100%
。所以body和html元素一样宽。那么html元素有多宽呢,默认情况下它和浏览器窗口一样宽
,这也就是为什么div总是占据浏览器宽度的50%,而html元素则是受限于viewport(和viewport占据一样的宽度),换句话说,viewport完全等于浏览器窗口,而且它不是HTML语言元素,所以你无法通过使用css对其进行影响
。
我们可以通过document.documentElement.clientWidth/clientHeight
来获取viewport的宽高, 它的单位是css像素
。
clientWidth/Height 和 window.innerWidth/innerHeight
上面两者都能够获取网页区域大小, 但是他们之间还是有区别的。 前者不包含滚动条, 后者包含
。
html元素的大小
我们可以通过document.documentElement.offsetWidth/offsetHeight
来获取html元素的宽高, 它的单位是css像素
。
event事件和媒体查询
event的三对属性:
- pageX/Y: 给出CSS像素中相对于html元素的坐标
- clientX/Y: 给出CSS像素中相对于viewport的坐标
- screenX/Y: 给出设备像素中相对于屏幕的坐标
媒体查询:
- 基于viewport(documentElement .clientWidth/Height)
@media all and (max-width: 400px)
- 基于屏幕(screen.width)
@media all and (max-device-width: 400px)
Mobile
在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
以下是关于各浏览器的viewport
三个viewport
前面介绍了viewport的概念, 但是在移动端的时候, viewport并不那么容易理解, ppk在移动端提出了三个viewport
的概念。
Layout viewport
也就是布局viewport,即默认的浏览器viewport , 并且可以通过document.documentElement.clientWidth
来获取。
图片引用自深入理解viewport
visual viewport
layout viewport 的宽度是默认的浏览器viewport,所以我们还需要一个viewport来代表网页区域的大小,ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth
来获取。
图片引用自深入理解viewport
ideal viewport
有了两个viewport并不ok, 因为我们既不想让用户滚动滚动条来浏览我们的网页,也不想用户盯着缩小了的pc网页浏览, 所以有了第三个viewport。 所谓的ideal viewport则是当layout viewport等于屏幕的宽度, 如ip6,它的ideal viewport就是375px
。
设置viewport
开发过h5的应该都知道, 我们经常会把下面这句代码复制到head标签中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
它的作用其实就是设置了ideal viewport
。以下是它的6个属性:
key | value |
---|---|
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
那么如果我们想设置ideal viewport, 只需要把width设置成width-device或者把initial-scale设置成1.0
就可以了。
前者比较容易理解, 后者设置成1就可以是为什么? 首先要理解设置成1.0就是意味着没有缩放,而这样却可以达到ideal viewport的效果, 那么很明显, 缩放是相对于 ideal viewport来进行缩放的
,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,不就得到了 ideal viewport。
如果两个属性都能设置ideal viewport, 那么当两个属性冲突时怎么解决?
遇到这种情况时,
浏览器会取它们两个中较大的那个值
。例如,当width=400,ideal viewport的宽度为320时,取的是400;当width=400, ideal viewport的宽度为480时,取的是ideal viewport的宽度。
css像素和设备像素
在移动端中, 1个css像素并不等于1个设备像素
, 而是取决于设备像素比(物理像素(设备像素)/独立像素(css像素))
,像Iphone的Retina屏幕, 就有2倍屏(ip6s)、3倍屏(ip6 plus), 也就是设备像素比的值分别是2和3,即1个css像素等同于4个设备像素或者9个, 如图:
并且, 我们可以通过window.devicePixelRatio
来获取设备像素比dpr。
1px的产生和解决
问题的产生
公司的设计大佬通常给的设计稿是基于ip6s的, 也就是750px(i6s的屏幕是375px,而且是上面说的两倍屏,所以有750个物理像素)。假设设计稿上面有个1px的border
,我们通常直接这样写:
border {
border: 1px solid #ccc;
}
然后设计审核的时候就被打回来了, 因为设计觉得变大了,也就是他觉得是2px的线
了。
究其原因,是因为设计稿是750px, 里面的1px实际上在真机只有0.5px
,所以就有了著名的1px问题。
问题的解决
1.直接使用0.5px
在iOS8下,苹果系列都已经支持0.5px了,那么意味着在devicePixelRatio = 2时,我们可以借助媒体查询来处理:著作权归作者所有。
@media (-webkit-min-device-pixel-ratio: 2) {
.border {
border-width: 0.5px
}
}
这种使用简单,但是兼容性不太好。
2.使用border-image或者background
也就是拿一张图片,一半透明,一半是我们想要的颜色,然后填充上去, 具体的例子就不讲了, 这种基本没啥人会用, 改个颜色还要修改图片,太麻烦了。
3.box-shadow
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
这种颜色有阴影, 估计过不了设计大佬的那关。
4.PostCSS的插件postcss-write-svg
直接借助插件帮助我们实现, 其实也就是postcss帮我们生成图片而已。
@svg 1px-border {
height: 2px;
@rect {
fill: var(--color, black); width: 100%; height: 50%;
}
}
.example { border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
最后Postcss会把对应的css编译出来, 这种兼容性好, 就是依赖于插件。
.example { border: 1px solid transparent;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch
}
5.伪类 + transform 实现
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。
.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
这种兼容好, 但是会和伪类冲突, 也是我司采用的方式。
6.缩小viewport
原理是使用meta标签中的viewport, 也就是上面所说的设置viewport, 将整个页面缩小0.5倍, 这个主要是麻烦在其他的元素也要跟着放大一倍再缩小, 为了这个小问题而这样, 似乎有点得不偿失。
然而, 淘宝的flexible方案(rem布局,见下文)帮我们搞定了这个问题。
flexible和rem
上面提到了flexible和rem的布局方案, 在刚推出的时候, 确实很火, 公司的一些项目目前仍然是采用该方案, 这里简单的说下其原理。
px、em、rem
- px: px在前面已经讲了, 就是一个固定单位。
- em: em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。
- rem: rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。
/* 作用于根元素,相对于原始大小(16px),所以html的font-size为32px*/
html {font-size: 2rem}
/* 作用于非根元素,相对于根元素字体大小,所以为64px */
p {font-size: 2rem}
flexible rem布局原理
flexible rem布局原理即是把设计稿等比宽的切成100份
, 假设每份的单位是x
, 那么我们在布局的时候就可以以x
为单位, 将设计稿等比例的放大缩小到对应的屏幕了
,这样就不用为各个屏幕做适配。
然而像上面所说的x是不存在的, 不过好在我们有rem, 只要我们将rem设置成1x
,那么开发过程中,不就达到我们的目的了吗?
如何将rem设成1x呢? 回想一下, 我们是不是能取得viewpor
t的宽度(document.documentElement.clientWidth
),我们能取得设备像素比
(window.devicePixelRatio
), 我们能够设置html
的样式(html.style.fontSize = '...'
), 所以简单的实现方案就有了
document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
当然,flexible并不这么简单,它还对于不同dpr做了处理, 它帮你处理了2倍屏、3倍屏等情况,通过设置viewport的缩放比,这也就是上面所说的0.5px处理方案之一, 具体的这里不再赘述, 有兴趣的同学可以看看原文。
最后,移动端 iOS 8 以上以及 Android 4.4 以上已经有了vw\vh
单位, 1vw\1vh相当于viewport的百分之一宽/高
,也就是我们上面所说的x单位, 如果你的手机支持该api, 也可以使用该单位方案。
为什么不用rem方案
依稀记得, 某次使用了rem处理活动页的时候, 被设计大佬驳回了。
大佬认为, 当用户使用更大的屏幕的时候, 他应该能看到更多的内容
, 而且设计稿被放大或者缩小的话, 会失去他原来的感觉
。
所以, 对于rem方案其实可能已经不太适合当前的情况了, 毕竟使用媒体查询和px以及em就能解决各种响应式问题, 虽然效率会比较低下, 而关于这个, 也恰好看到了有人在知乎上提了这么个问题, 有兴趣的可以前去围观。
总结
本文多是概念上的,也参考了许多文章,要真正理解还需要多参考实际项目。
参考&引用
移动前端开发之viewport的深入理解
A tale of two viewports — part one
A tale of two viewports — part two
Meta viewport
7 种方法解决移动端 Retina 屏幕 1px 边框问题
再谈Retina下1px的解决方案
vh,vw单位你知道多少?
Rem布局的原理解析
Css-移动端适配总结的更多相关文章
- css移动端适配 1px边框的解决方案
.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...
- css样式重置 移动端适配
css 默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- Web移动端适配总结
移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- Rem实现移动端适配
移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...
随机推荐
- windows 7安装Fiddler抓HTTPS请求的解决办法
一.下载安装Fiddler,网上随意一搜就可找到安装软件 二.打开已经安装的fiddler,本人的安装目录:D:\AutoTest\fiddle\Fiddler2 三.打开的页面如图: 三.点击too ...
- python——在文件存放路径下自动创建文件夹!
1.a.py文件存放的路径下为(D:\Auto\eclipse\workspace\Testhtml\Test) 2.通过os.getcwd()获取的路径为:D:\Auto\eclipse\works ...
- samba 基本配置及自定义控制
Samba简介: Samba实现的是Linux和Windows之间的一种共享,为两种不同的操作系统架起了一座桥梁,使Linux系统和Windows系统之间能够实现互相通信,共享文件系统.打印机及其他资 ...
- 简述private,protected,public,internal修饰符的访问权限
private:私有成员,在类的内部才可以访问 protected:保护成员,在类的内部和继承类中可以访问 public:公共成员,完全公开,没有访问限制 internal:当前程序集内可以访问
- c#在pictureBox控件上绘制多个矩形框及删除绘制的矩形框
在pictureBox上每次只绘制一个矩形框,绘制下一个矩形框时上次绘制的矩形框取消,代码如链接:https://www.cnblogs.com/luxiao/p/5625196.html 在绘制矩形 ...
- 2.JAVA-基础语法以及String的介绍
1.goto和const 目前java中,和C/C++有点区别,就是暂未用到goto const关键字.示例如下: public class Hello{ public static void mai ...
- 还在用AIDL吗?试试EasyMessenger吧
EasyMessenger 直达Github项目地址 一款用于Android平台的基于Binder的进程间通信库,采用annotationProcessor生成IPC通信需要的代码.EasyMesse ...
- git使用笔记1:结合Github远程仓库管理项目
git是一个十分好用的版本控制工具,我们经常在本地使用git进行项目开发,Git 并不像 SVN 那样有个中心服务器,如果想要通过 Git 分享你的代码或者与其他开发人员合作,就需要将数据放到一台其他 ...
- windows远程桌面神器
近需要远程家庭版的WINDOWS系统的笔记本,发现它竟然没有远程桌面功能,系统属性下面根本没有远程桌面选项. 于是上网搜解决方案,找到下面这个神器,名字叫RDPwrap,不但能开通Vista以后任何版 ...
- LeetCode算法题-Toeplitz Matrix(Java实现)
这是悦乐书的第312次更新,第333篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第181题(顺位题号是766).如果从左上角到右下角的每个对角线具有相同的元素,则矩阵是 ...