快捷搜索:
来自 新京葡娱乐场网址 2019-11-17 15:14 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

浅谈移动前端适配,web多屏适配

茴字的四种写法——浅谈移动前端适配

2018/04/16 · 基础技术 · 移动端

原文出处: tomc   

话说我刚工作的时候,就开始用rem了,过了没多久,接触到了flexible,系统化且支持iOS的retina屏迅速征服了我,最近又看到了大漠大神的vw。所以本文想完成一篇一站式的文章,可以系统的了解前端适配的演进。闲话少叙,马上开始。

web屏幕适配(一):https://segmentfault.com/a/1190000004524243
web屏幕适配(二):https://segmentfault.com/a/1190000004538413
前端乱炖:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041

1. 什么是前端适配

从UI展现层面上:
我们期望不同尺寸的设备,页面可以自适应的展示或者进行等比缩放,从而在不同的尺寸的设备下看起来协调或者差不多

从代码实现层面上:
我们希望前端适配可以用用尽可能简洁的代码来实现。最好一套代码实现兼容所有设备,而不是对每个或每种设备都写一套方案,不是次次都选用最无奈的方案(Android和iOS分开编写)。

核心:

一、利用rem来处理尺寸(width、height、margin、padding等)。
二、物理像素border的实现,viewport、物理像素、css像素概念。
三、vw、vh、vmin、vmax、% (vw不兼容安卓4.3以下浏览器)。
四、一物理像素border实现两种方法:
(1)整个页面缩放,viewport 设置 scale
(2)单个元素缩放,transform scale
五、术语概念:

* 物理像素:买手机的时候会有一个 nm 的分辨率,那是屏幕的nm个呈像的点,一个点(小方格)为一个物理像素。它是屏幕能显示的最小粒度

* CSS像素:就是CSS里的Px,上面已经讲了是viewport中的一个小方格。

* 

像素密度:即dpi或ppi,屏幕每英寸所占的物理像素点。

dpi:设备像素比。

viewport:屏幕的视口宽高,在css中,1px是指viewport中的一个小方格,而viewport的宽度是可以任意设置的。有两个,一个实际窗口,一个虚拟窗口。
* device-width:设备宽度。

而CSS像素与物理像素之间是有一个转换关系的。即是:
六、device-width:device-width的宽度值单位是CSS像素。
当viewport设置为device-width时,此时它是手机横向分辨率 / 转换系数。即:

七、viewport设置:


(1)头部信息设置:虚拟窗口;模仿实际的窗口;还有个缩放;
<meta charset="UTF-8" name="viewport" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>


(2)js部分设置:

<script>
//适应移动设备和pc设备屏幕的文档默认字体设置;
var dpr = window.devicePixelRatio;
document.documentElement.style.fontSize = dpr*window.innerWidth / 10 'px'; var meta = document.querySelector('meta');
meta.setAttribute('content', 'initial-scale=' 1/dpr ', '
'maximum-scale=' 1/dpr ', minimum-scale=' 1/dpr ', user-scalable=no');
</script>


1.移动端适配的是什么?
我们讨论的是网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样。
说白了就是同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比例上跟设计稿一致。

结论:明白了,所以padding,margin,图片等的大小基本都要做适配

2.那有什么方法可以做到这种适配?
关键要找到一种长度单位,使得一样的取值,在不同尺寸的屏幕上的大小按比例缩放。
1.网页在viewport中布局,viewport被分成一个个小方块,一个CSS像素占一个方块;
2.在设置了viewport宽度等于设备宽度的情况下,通过某种算法,在不同大小的屏幕上,1个CSS像素所占屏幕的物理尺寸是一样大的既然1个CSS像素在不同屏幕上物理尺寸一样大,那px肯定不能做为适配的方法了 ;
结论:
(1)长度单位rem是相对于html标签的font-size来计算的。例如html标签设置font-size:36px,同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=36px*1.2=43.2px
(2)奥秘就在于结合px的固定尺寸和rem的相对尺寸!

3.适配具体执行方案(阿里flexible):

1. 设置viewport为设备宽度(这里不一定,但目前先这样足矣);

2. 将viewport分成10rem,并计算出1rem在当前浏览器的像素值,把它赋予html标签的font-size(分成10rem只是为了方便计算而已);

3. 写CSS代码时,遇到要适配的地方,比如width,margin,padding等,就不要再用px了,改成用rem;

JS和Html代码如下:
<!DOCTYPE html><html lang="zh-cn">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height">
<title>啃先生的网</title>

<script type="text/javascript">
    var cssEl = document.createElement('style');
    document.documentElement.firstElementChild.appendChild(cssEl);

    function setPxPerRem(){
        var dpr = 1;
        //把viewport分成10份的rem,html标签的font-size设置为1rem的大小;
        var pxPerRem = document.documentElement.clientWidth * dpr / 10;
        cssEl.innerHTML = 'html{font-size:'   pxPerRem   'px!important;}';
    }
    setPxPerRem();
</script></head><body>

</body></html>
CSS代码做了类似如下的修改:

运行结果如下:边距和头像图片都随屏幕变化而变化了260400的屏幕、 380400的屏幕;

对精益求精的项目,有以下问题:
1.图1的屏幕的尺寸较小,因此头像应该小些,话题左边的空白也应该小一些。
2.图片应该保持正方形,而且两张图之间的边距应该随屏幕变化而变化
结论:所以padding,margin,图片等的大小基本都要做适配

4.px与rem之间的单位换算 例如:
现有设计师提供宽度为400px的设计稿,其中某个图片的宽度设计为20px,那么,CSS的写法就是img{width: 0.5rem;},怎么得出这个结果的呢?

1. 设计稿的宽度视同手机宽度,即假设有一个viewport为400px的手机

2. 将它分成10rem,每个rem为40px;

3. 

那么图片宽度20px自然就是0.5rem;

5.手动换算太麻烦怎么办:编辑器插件;
6.参考链接:
1. 使用Flexible实现手淘H5页面的终端适配(https://github.com/amfe/article/issues/17)

2. 移动端高清、多屏适配方案(http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041)

3. A tale of two viewports(http://www.quirksmode.org/mobile/viewports.html)

2. 关键字

如果你了解这些关键字,那么这段大可以跳过,如果后面遇到了问题,感觉有些疑惑,也可以再回来查阅。

2.1 Viewport/视口

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域[1],但不一定是我们可见的区域。具体来说,分为以下三种。

2.1.1 Visual Viewport

Visual Viewport: 可见视口。就是移动设备上可以被我们看见的部分。宽度在移动端通过window.innerWidth获得(仅限移动端,PC上哪怕是chrome模拟也会有不同的结果)。

新京葡娱乐场网址 1

新京葡娱乐场网址 ,2.2.2 Layout Viewport

Layout Viewport: 布局视口。

新京葡娱乐场网址 2

如果把PC上的页面放到移动端,以iphone8为例,如果只展示为可见视口的宽度(375px),那么页面会被压缩的特别窄而显示错乱,所以移动浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。[1]

而事实上,我们一般看不到如上图这样出现横向滚动条的界面;在手机上访问页面时,往往是下图的样子:新京葡娱乐场网址 3

这是由于页面body宽度设置了100%而没有指定一个具体的宽度导致的,从而使页面被等比缩放了。由于用户可以缩放,所以还算能正常浏览。

2.2.3 Ideal Viewport

Ideal Viewport:理想视口,其实就是设备的可见区域,和可见视口一致。

设置Ideal Viewport的好处是,只要按照Ideal Viewport来设计样式稿,用户就不用能最完美的查看网站的内容——既不用左右滑动,也不用放大缩小。

设置理想视口:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

1
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

这段代码的意思是将布局视口的宽度设置为设备宽度,初始缩放比例为1,最大缩放比例为1,用户不能缩放。

2.2 像素

2.2.1 物理像素

物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。[2]

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:浅谈移动前端适配,web多屏适配

关键词: