您的位置:奥门新浦京网址 > Wed前段 > 移动端自适应方案,CSS布局奇技淫巧

移动端自适应方案,CSS布局奇技淫巧

发布时间:2019-10-18 17:01编辑:Wed前段浏览(103)

    网页程序迁移至微信小程序web-view详解

    2018/08/02 · JavaScript · 小程序

    原文出处: NeoPasser   

    小程序现在越来越流行,但是公司的很多项目都是用网页写的,小程序语法不兼容原生网页,使得旧有项目迁移至小程序代价很高。

    小程序之前开放了webview功能,可以说是网页应用的一大福音了,但是微信的webview有一些坑,这篇文章就是列举一下我在开发过程中遇到的一些问题以及我找到的一些解决方案。

    移动端自适应方案

    2015/09/14 · JavaScript, 基础技术 · 移动端, 自适应

    原文出处: 大搜车前端团队博客   

    前方依旧高能 ^_^ , 本文主要解决以下问题:

    • 真的需要动态生成viewport吗?
    • 如何自适应?

    然后给出主观的最佳实践。

    • 最帅的flex

    赶时间戳这里传送门

    比较无聊干燥的文章,看前请喝水。

    研究样本

    1. 手淘 ml.js
    2. 天猫首页
    3. 手机携程

    一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事。回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下。

    研究结论

    1. 手淘

      • 获取手机dpr(window.devicePixelRatio),动态生成viewport。
      • 换取手机宽度,分成10份,每一份的宽度即是rem的尺寸。
      • 根据设计稿尺寸(px)通过计算,转换成rem去布局。

      ps:海外淘宝并没有这样做,而是scale1.0并且图片大概都是2倍图。

    2. 天猫

      • 采用scale=1.0 写死viewport。
      • flex布局,笃定认为布局尺寸是375 (iPhone6)
      • rem 确定非flex的元素
    3. 手机携程
      • 采用scale=1.0 写死viewport
      • px + 百分比布局

    实现之前

    提及实现之前,先简单过一些概念。

    完美视口

    完美视口的概念已经街知巷闻了,如果不知道可以先戳这里。

    在这几篇文章里,还会学会设备像素,css像素等概念,大神讲的很透彻,这里就不献丑了。

    ppk 谈 viewport其1 ppk 谈 viewport其2 ppk 谈 viewport其3

    这里给出完美视口

    XHTML

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

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

    在移动端,低端无定制的需求,都可以用这个完美视口完成。然而看到这篇文章的你,显然完美视口还不能满足。

    dpr

    dpr是devicePixelRatio的简写,也就是屏幕分辩比

    历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

    1
    历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

    坊间对于dpr更通俗的说法叫

    • 一倍屏
    • 两倍屏
    • 三倍屏

    scale

    scale是屏幕拉伸比。也就是视口上的initial-scale , maximum-sacle 等属性。

    scale 和 dpr的关系是倒数。

    1
    scale 和 dpr的关系是倒数。

    直观感受

    这是我对dpr的直观感受图片 1

    同样去展示 1 x 1 像素的点,虽然在屏幕上看到的大小是一样,但背后表现它的像素数量是不同。

    这也意味着,在一样大小的面积内,更多物理像素的屏幕上展现色彩的能力越强。

    但这不是我要关注的点,我们关注的是。

    1. 是否需要根据倍屏去切换scale达到伸缩的目的

    2. 切换scale的成本和回报

    下面根据几个实验来回答这两个问题。

    自适应问题

    实验1 - 传说中的1px

    大多数给出要动态切换scale的理由有以下两个。

    1. 1px并不是 [ 真实的1px ] , 2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。
    1
    2
    3
    1. 1px并不是 [ 真实的1px ] ,
     
    2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。

    CSS布局奇技淫巧:高度自适应

    2016/11/03 · CSS · 自适应

    原文出处: 无双   

    何为高度自适应?

    高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些。

    布局思路

    在IE7+及chrome、firefox等浏览器中,高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时,如果没有给它设定高度或宽度,则它的的高度和宽度是由它的top、right、bottom、left属性决定的,但这一法则在IE6中并不适用,因此在IE6中还得另辟蹊径。在IE6中给html设定padding,并不会撑大html元素的尺寸,这正是我们要利用的地方。

    在IE7+ 和 W3C浏览器中的方案

    看下代码:

    图片 2

    再看下效果:

    图片 3

    在IE6中的方案

    好吧,不想再对IE6吐槽,只想尽快搞定它。

    在IE6中的思路是,把html和body元素的高度设定为100%,即浏览器窗口的高度,然后利用padding-top在html元素上挤出一点空间来,因为绝对定位的最高参照物是参照html元素的,所以可以把顶栏绝对定位在html的padding-top那块空间上。这时body的高度就是html的高度(也是浏览器窗口的高度)减去html的padding-top的值,这也是ie6非常奇怪的一个特性,因为按照w3c盒模型来讲,增加了html元素的padding-top,则html元素的高度也会相应增加,这时浏览器窗口应该会出现垂直滚动条了。但IE6不会,html的增加了padding-top后,整个html元素的高度还是保持不变,即浏览器窗口的高度,变化的是body的高度减小了,用来抵消html的padding-top.

    还是先看看代码吧:

    图片 4

    再看下效果:

    图片 5

    最终的兼容代码

    XHTML

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度自适应布局</title> <style> html,body{ height:100%;} body,div{ margin:0; padding:0; color:#F00;} * html{ padding-top:100px;}/*for ie6*/ .top{ background:#36C; height:100px;} * html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/ .main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;} * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/ </style> </head> <body> <div class="top">我是top,固定高度</div> <div class="main">我是main,高度随浏览器大小变化而变化<p style="height:500px;"></p></div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>高度自适应布局</title>
    <style>
    html,body{ height:100%;}
    body,div{ margin:0; padding:0; color:#F00;}
    * html{ padding-top:100px;}/*for ie6*/
    .top{ background:#36C; height:100px;}
    * html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
    .main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
    * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
    </style>
    </head>
    <body>
    <div class="top">我是top,固定高度</div>
    <div class="main">我是main,高度随浏览器大小变化而变化<p style="height:500px;"></p></div>
    </body>
    </html>

    效果图:

    非ie6

    图片 6

    ie6

    图片 7

    推广

    这种方法也适用于顶栏与底栏高度固定,中间那栏高度自适应的三栏布局

    3 赞 3 收藏 评论

    图片 8

    遇到的问题

    1. openid登录问题
    2. webview动态src
    3. 支付功能
    4. 分享功能
    5. 扫描普通二维码跳转特定页面
    6. 返回按钮缺失问题

    真实的1px

    这一条和设计稿密切想关,要讨论它不能抛开设计稿不谈。

    这里先补一下切图课,如果自己要做1x , 2x, 3x 的设计稿。如何去实现?

    尺寸!!!

    大多数情况下,设计师产出各种尺寸的稿子(事实上一般只是2倍稿子),都是先画出大尺寸的稿子,再去缩小尺寸,最后导出。 这样会带来问题:

    如果设计师在2倍稿子里画了一条1px的线,这时候假如我们要在scale=1.0里呈现的话,就会变成0.5px,如下图。

    图片 9

    而很大一部分手机是无法画出0.5px的,因此这里一般有一个hack

    CSS

    transform:scaleX(0.5)或transform:scaleY(0.5)

    1
    transform:scaleX(0.5)或transform:scaleY(0.5)

    但是有人提出了, 既然可以改变viewport的scale达到合理利用不同倍屏的优势,为什么不这么写呢。

    XHTML

    <meta name="viewport" content="initial-scale=2.0,width=device-width/>

    1
    <meta name="viewport" content="initial-scale=2.0,width=device-width/>

    等等,为了设计稿的尺寸我们如此大费周章?

    事实上,即使2x设计稿避免了1px。3x设计稿也可能出现2px。

    而且这里如果写死scale可能造成部分地方和稿子出入较大,无法还原设计稿,界面的显示会打折扣。

    解决这个问题的关键在于:交流

    • 如果你的设计师是个要求严格,而且产品界面把控非常严格的话,应该动态去实现viewport或使用scale的hack去改变。
    • 如果部分区域实在没有必要[ 过度优化 ], scale=1.0 实在是非常低成本还原的方案,未尝不可。

    openid登录问题

    微信webview的使用方法很简单,只要如下设置src就可以展示具体的网站了。

    <!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src=";

    1
    2
    3
    <!-- wxml -->
    <!-- 指向微信公众平台首页的web-view -->
    <web-view src="https://mp.weixin.qq.com/"></web-view>

    微信环境里的很多网页都是用页面要实现网站的登录功能,只要把登录的信息,比如openid或者其他信息拼接到src里就好了。

    这里有个问题,公众号的账号体系一般是以openid来判断唯一性的,小程序是可以获取openid的,但是小程序的openid和原公众号之类的openid是不一样的,需要将原先的openid账号体系升级为unionid账号体系。

    以下是微信对unionid的介绍

    获取用户基本信息(UnionID机制)

    在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的。对于不同公众号,同一用户的openid不同)。公众号可通过本接口来根据OpenID获取用户基本信息,包括昵称、头像、性别、所在城市、语言和关注时间。

    请注意,如果开发者有在多个公众号,或在公众号、移动应用之间统一用户帐号的需求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可利用UnionID机制来满足上述需求。

    UnionID机制说明:

    开发者可通过OpenID来获取用户基本信息。特别需要注意的是,如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

    做完以上步骤,就可以调用小程序api wx.getUserInfo() 来获取用户信息了,此步骤需要进行后台信息解密过程,在此就不再赘述,结合小程序api文档操作就好。

    获取到unioid之后,将unionid信息拼接到src就可以进行网页登录操作了(前提是网页可以用跳转链接的方式登录,类似公众号页面获取openid的形式)。

    对应倍图

    对于这一点,争议较多,因为如果要做到对应倍图的话,意味着图片都需要做三份。成本太高了。

    这里通常有两种做法

    1. 图片服务

      例如在100×100的图片容器中。

    1倍图 http:// img.xxx.com/abc.jpg_100x100 2倍图 http://
    img.xxx.com/abc.jpg_200x200 3倍图 http://
    img.xxx.com/abc.jpg_300x300
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-8">
    8
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f19d520d5d723297616-1" class="crayon-line">
    1倍图
    </div>
    <div id="crayon-5b8f19d520d5d723297616-2" class="crayon-line crayon-striped-line">
     http:// img.xxx.com/abc.jpg_100x100
    </div>
    <div id="crayon-5b8f19d520d5d723297616-3" class="crayon-line">
     
    </div>
    <div id="crayon-5b8f19d520d5d723297616-4" class="crayon-line crayon-striped-line">
     2倍图
    </div>
    <div id="crayon-5b8f19d520d5d723297616-5" class="crayon-line">
     http:// img.xxx.com/abc.jpg_200x200
    </div>
    <div id="crayon-5b8f19d520d5d723297616-6" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f19d520d5d723297616-7" class="crayon-line">
     3倍图
    </div>
    <div id="crayon-5b8f19d520d5d723297616-8" class="crayon-line crayon-striped-line">
     http:// img.xxx.com/abc.jpg_300x300
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. 定死尺寸

      放弃1屏手机,全部启用2倍图,由于流量会消耗比较大(低端机),因此滚动加载等优化手段就会显得比较重要了。

    实验1 – scale对倍图重要吗

    这里看一下不同scale下图片的差异。

    • 测试样本:160×160凯尔特人队标logo(一不小心暴露了绿色的血液)
    • 测试容器:160×160 img标签
    • 测试环境: intial-scale分别为1.0 / 0.5 / 0.3333
    • 图片尺寸: 1x(160×160) 2x(320×320) 3x(480×480)

    图片 10

    测试结论:不同scale下使用不同图片差异非常大。

    但是这里需要验证,是否不同scale同一图片差异起到绝对作用。

    图片 11

    • 肉眼观看基本无区别,除了用取色器去获取,会发现有色差和部分像素被分割(下面会说到),之外,用不同scale显示同一图片基本没有什么区别。

    实验2 – DownSampling

    由于上一个实验最后的图片,使用同一scale下,不同倍数的图片,存在色差,这里验证一下。

    • 测试方案

      测试图片:

     图片 12

    图片尺寸: 400×300 , 300×225 , 200×150 , 100×75

    测试环境: scale = 1.0

    测试容器: 100×75的 img元素

    由于之前知道了DownSampling概念的存在,这里只是好奇心驱动试验一下。(对自适应其实没有卵用)

    DownSampling是说大图放入比图片尺寸小的容器中的时候,出现像素分割成就近色的情况。

    测试结果:

    图片 13

    注:6plus貌似和其他机型不同。

    触发情况: 不同颜色像素接触的地方,会出现DownSampling。

    图片 14

    rem

    对于rem要说的不多,看这张图。对于用到px的元素,使用rem统一去管理是很灵活的!

    图片 15

    字体

    无论是采用动态生成viewport或者写死scale,字体都需要适配大屏。之前提出的rem方案被证实在不同手机上显示不一致,这里还是回归成了px。

    px最好用双数

    两种方案(这里不考虑媒体查询,因为Android碎..,嗯,不说了…)

    1. JS动态计算(常见做法)
    根据不同屏幕宽度计算不同字号大小。 1.
    定基准值,设计稿是750宽度(2倍屏),字体的大小是24px. 2.
    计算指定宽度的字体大小。 var fontSize = width / 750 * 24 ;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-7">
    7
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f19d520d62124238623-1" class="crayon-line">
    根据不同屏幕宽度计算不同字号大小。
    </div>
    <div id="crayon-5b8f19d520d62124238623-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f19d520d62124238623-3" class="crayon-line">
    1. 定基准值,设计稿是750宽度(2倍屏),字体的大小是24px.
    </div>
    <div id="crayon-5b8f19d520d62124238623-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f19d520d62124238623-5" class="crayon-line">
    2. 计算指定宽度的字体大小。
    </div>
    <div id="crayon-5b8f19d520d62124238623-6" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f19d520d62124238623-7" class="crayon-line">
    var fontSize = width / 750 * 24 ;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. 根据dpr设定 (比较好的做法)

      ps : 一般时初始化时设置为根元素html的attribute,

    JavaScript
    
    window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f19d520d65248160001-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d65248160001-2">
    2
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f19d520d65248160001-1" class="crayon-line">
       window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)
    </div>
    <div id="crayon-5b8f19d520d65248160001-2" class="crayon-line crayon-striped-line">
     
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    然后css这样写
    
    
    
    CSS
    
    [dpr=1] { font-size=16px; } [dpr=2] { font-size=32px; }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-7">
    7
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f19d520d69092077898-1" class="crayon-line">
    [dpr=1] {
    </div>
    <div id="crayon-5b8f19d520d69092077898-2" class="crayon-line crayon-striped-line">
           font-size=16px; 
    </div>
    <div id="crayon-5b8f19d520d69092077898-3" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f19d520d69092077898-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f19d520d69092077898-5" class="crayon-line">
    [dpr=2] {
    </div>
    <div id="crayon-5b8f19d520d69092077898-6" class="crayon-line crayon-striped-line">
           font-size=32px; 
    </div>
    <div id="crayon-5b8f19d520d69092077898-7" class="crayon-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    布局

    权衡之下,我觉得flex真的灵活方便太多,因此这里给出一个布局demo。大致如下图。(画的比较粗糙..)

    (上稿下还原)

    图片 16图片 17

    基本涵盖:

    • 固定头部
    • 固定底部
    • 多列自适应
    • 高度自定义
    • 内容滚动

    为什么flex能够做到百分比做不到的自适应。

    比如我们也去学天猫,笃定认为宽度就是375(iPhone6尺寸),那么两个元素flex分别为200和175。

    无需计算百分比,在不同的界面上就会自动计算,而且以该浏览器可以识别的最小单位实现,比自己计算的百分比要精准。

    图片 18

    demo传送门

    结论

    1. 写死initial-scale=1.0 对于实现1px问题, 问题比较大。与设计师沟通协商才是最好的解决问题的方法。
    2. 写死initial-scale=1.0 对于不同图片的显示, 采用不同倍图的话,会有一定压缩,但在可接受范围内。(当然,动态生成scale能够完美呈现…)
    3. 布局

      如果采用动态生成viewport方案,就用到rem来还原设计稿(还有rem-px的计算)。成本在效率上。

      如果采用写死initial-scale=1.0方案,就用flex布局,主要成本在flex兼容性上,但是实现非常灵活简单。

    后记

    viewport的scale的重要性远比我想象的要低很多,我原本以为这就是自适应。

    但是后来发现,其实自适应还是回到了远古时代的百分比%,只是现在有更聪明更灵活的方式flex,未来应该有两个方向去自适应。

    • 一个是拥抱vw,vh。(手淘的ml.js十等分宽度,1rem=10vw
    • 一个是更好的使用flex

    现在使用后者已经有很多的库可以解决兼容性了,如参考资源最后的一个flex库。

    调研的网站并不多,但是百分比仍然是很多人的首选。

    参考资源

    手淘ml库

    手机淘宝

    天猫首页

    移动端高清、多平适配方案

    rem对webapp带来的影响

    flex方案 适配到IE10+

     

     

    2 赞 10 收藏 评论

    图片 19

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:移动端自适应方案,CSS布局奇技淫巧

    关键词:

上一篇:没有了

下一篇:没有了