移动端适配_移动端适配方案 - CSDN
精华内容
参与话题
  • 深入剖析了rem适配,viewport适配的原理。整个项目在css层面封装度也很高。使用了less等预处理器技术。对less的嵌套,继承,混合等进行了强有力的运用。对移动端常见的无缝滑屏,快速滑屏,橡皮筋效果,即点即停等效果...
  • 移动端页面适配方案及原理

    万次阅读 2018-09-05 21:26:00
    本人未雨绸缪,学习一波移动端适配方案。 0. 移动端 vs PC端区别 1. 页面的三个视窗和缩放 1.1 layout viewport和visual viewport: 1.2 ideal viewport: 1.3 页面的缩放 2. 移动端适配 2.1 使用meta标签控制...

    最近要接一个移动端的需求。

    类似歌曲排行榜的H5页。

    本人未雨绸缪,学习一波移动端适配方案。

    这里写图片描述

    0. 移动端 vs PC端区别

    移动端布局复杂在哪里捏?

    那就是。

    PC端布局,css的1px = 1个物理像素。

    也就是说,不管换多少台pc过来,css定义的1px,在所有设备上,都长一样:就是1px。

    移动端布局:css的1px = n个物理像素。(n未知)

    也就是说,不同的设备,css定义1px,展示出来的效果可能会千差万别。

    我们的目的就是,在移动端,css定义1px,在所有设备,展示出来的效果,完全一致,还是1px。

    这一点,如何来实现呢?

    且看下文。
    这里写图片描述

    1. 页面的三个视窗和缩放

    1.1 layout viewportvisual viewport:

    这里写图片描述

    如图所示。
    layout viewport是我们文档的大小(document)。这就是我们前端工程师绘制的文档。可以使用document.documentElement.clientWidth获取它的宽度。

    visual viewport是当前可是区域的大小(window)。可以使用window.innerWidth来获取它的宽度。

    图中,layout viewportvisual viewport要大,所以假设前端开发工程师开发了如图layout viewport大小的文档,在显示时,会出现横向的滚动条(我视图中纵向高度两者一致)。

    所以,在移动端,当然不想要横向纵向的滚动条了。所以,如何想办法使layout viewportvisual viewport等大呢?且待后文分解。

    1.2 ideal viewport:

    随着手机平板更新换代。屏幕变得越来越扑朔迷离呀。

    移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。

    所以说,一个设备,它的窗口范围可能是320x480。但是人家的屏幕像素密度大,可能我们一个320x480的文档,只能占有屏幕的四分之一。

    这个设备,它的ideal viewport是640x960,visual viewport是320x480。实际上,ideal viewport才是真正展示到设备上的最终屏幕大小。

    所以,我们希望我们的文档能正好铺满所有不同屏幕像素密度的设备,假设我们解决了layout viewportvisual viewport,我们还要解决ideal viewportvisual viewport不一致的问题。且待后文分解。

    1.3 页面的缩放

    如果用户把页面放大一倍,可以想象,1px像素,在屏幕上,就会显示出4个物理像素(分别是横向和纵向)。这时候假设我们解决了三个layout不同的问题。用户一缩放,物理像素和绘制像素又不等大了。我们希望在移动端,禁止整张页面的缩放。

    2. 移动端适配

    我们现在有以下目标:

    1. 使上文提到的三个layout等大
    2. 让用户不能缩放

    2.1 使用meta标签控制viewport

    先甩一个meta标签:

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

    这个meta标签是做什么用的呢

    看一下参数:

    width :设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
    initial-scale: 设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale: 允许用户的最大缩放值,为一个数字,可以带小数
    height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
    user-scalable: 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

    来自:https://www.cnblogs.com/2050/p/3877280.html

    设置一下width:

    <meta name="viewport" content="width=device-width">

    device-width是设备的物理宽度,就是ideal viewport
    呦吼,一步到位呀。
    根据上文的api,我设置了layout viewport的宽度和ideal viewport的宽度一致,解决了css 的px单位与设备真实物理像素对应的问题。

    哈哈,以后我在文档里面,这么写也不会有滚动条喽。

    // main是body下最外层元素
    .main {
        width: 100%;
        height: 100%;
    }

    这里写图片描述

    考虑页面的兼容性,再加入禁止缩放:

    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maxnum-scale=1,user-scalable=no">

    啦啦啦啦,齐活。
    这里写图片描述

    展开全文
  • 前端解决移动端适配的五种方法

    千次阅读 2020-05-11 13:42:50
    移动端适配的五种方法 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 第一种方法:viewport适配 原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var ...

    移动端适配的五种方法

    所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示

    第一种方法:viewport适配

    原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.

    //获取meta节点
    var metaNode = document.querySelector('meta[name=viewport]');
    
    //定义设计稿宽度为375
    var designWidth = 375;
    
    //计算当前屏幕的宽度与设计稿比例
    var scale = document.documentElement.clientWidth/designWidth;
    
    //通过设置meta元素中content的initial-scale值达到移动端适配
    meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
    

    第二种方法:借助media实现rem适配

    rem:CSS的长度单位, 根元素字体大小的倍数,只有根元素字体大小有关; html 中的根元素即 html 元素。

    大部分浏览器的默认字体大小都是16px,所以1rem = 16px;

    rem适配原理:

    • 长度单位都是用 rem 设置
    • 当屏幕尺寸改变时,只需要修改 html 元素的 font-size 即可实现等比适配
    • 我们在制作页面的时候,只考虑跟设计稿相同的屏幕尺寸即可,其他尺寸屏幕自动适配
    //对屏幕大小划分了html不同的font-size
    @media screen and (min-width: 320px) {html{font-size:50px;}}
    @media screen and (min-width: 360px) {html{font-size:56.25px;}}
    @media screen and (min-width: 375px) {html{font-size:58.59375px;}}
    @media screen and (min-width: 400px) {html{font-size:62.5px;}}
    @media screen and (min-width: 414px) {html{font-size:64.6875px;}}
    @media screen and (min-width: 440px) {html{font-size:68.75px;}}
    @media screen and (min-width: 480px) {html{font-size:75px;}}
    @media screen and (min-width: 520px) {html{font-size:81.25px;}}
    @media screen and (min-width: 560px) {html{font-size:87.5px;}}
    @media screen and (min-width: 600px) {html{font-size:93.75px;}}
    @media screen and (min-width: 640px) {html{font-size:100px;}}
    @media screen and (min-width: 680px) {html{font-size:106.25px;}}
    @media screen and (min-width: 720px) {html{font-size:112.5px;}}
    @media screen and (min-width: 760px) {html{font-size:118.75px;}}
    @media screen and (min-width: 800px) {html{font-size:125px;}}
    @media screen and (min-width: 960px) {html{font-size:150px;}}
    

    第三种方法:JS配合修改配合rem适配

    var designWidth = 375;  		// 设计稿宽度
    var remPx = 100;               // 在屏幕宽度375px,的时候,设置根元素字体大小 100px
    var scale = window.innerWidth / designWidth; //计算当前屏幕的宽度与设计稿比例
    // 根据屏幕宽度 动态计算根元素的 字体大小
    document.documentElement.style.fontSize = scale*remPx + 'px';
    

    这里我们计算当前屏幕的宽度与设计稿比后用比例scale乘上100,是因为rem都是基于font-size值设置的,100便于计算,值可以为任意数,比如10,但是Chrome中最小为12,所以这里选择用100;

    • 比如某个元素,设计稿设计宽度为 640px, 我们需要在css中设置 width: 6.4rem
    • 比如某个元素,设计稿设计字体大小是 16px, 我们需要在css中设置 font-size:0.16rem

    从而达到rem适配。

    第四种方法:JS动态修改配合CSS预处理器(less)

    	// 计算屏幕宽度
    var screen = document.documentElement.clientWidth;
    	// 计算字体大小,取屏幕宽度的16分之一
    var size = screen / 16;
    	// 设置根元素字体大小
    document.documentElement.style.fontSize = size + 'px';
    

    js获取当前屏幕的宽度,将屏幕宽度的16分之一设置给html的font-size

    // 此时设计稿的宽度为375,定义一个less变量等于16分之一的设计稿宽度
    @rem: 375/16rem;
    

    如果此时设计稿中的16可以为任意值,你设置多少,js中屏幕宽度就除于多少再赋值给html的font-size。

    若设计稿中的某元素设置宽高为200px

    .box{
    	width:200px;
        height:200px;
    }
    

    此时可以替换为:

    .box{
    	width:200/@rem;
        height:200/@rem;
    }
    

    分析:

    设计稿中的元素尺寸都是基于设计稿的宽度而定,如上述,200px的宽度是基于设计稿375px而定的,但当js中获取的宽度发生改变时,需要解决适配问题。假设js中获取的此时屏幕宽度为750px,那么此时html的font-size值为750/16 px;

    此时计算box的width为400px
    在这里插入图片描述
    注:1rem = 1 html的font-size

    此方法不需要进行单位数值的计算,只需要定义一个less变量,再查找替换将单位px换成 /@rem 即可。

    第五种方法:JS动态修改配合rem适配

    这种方法跟第四种雷同,但不需要再在less中定义变量,只需要进行js获取配合查找替换px即可。

    	// 计算屏幕宽度
    var screen = document.documentElement.clientWidth;
    	// 设置根元素字体大小
    document.documentElement.style.fontSize = screen + 'px';
    
    .box{
    	width:200px;
        height:200px;
    }
    
    .box{
    	width:200/375rem;
        height:200/375rem;
    }
    

    分析:

    这种方法是js动态获取屏幕宽度,直接将html的font-size设置为屏幕的宽度,再在less中进行换算。
    若此时js获取的屏幕宽度为750px,html的font-size值设置为750px后,此时计算box的width为400px

    200/375rem = 200/375*750 px = 400px
    
    展开全文
  • 移动端前端适配方案(总结) -- 面试重点

    万次阅读 多人点赞 2018-08-15 20:29:01
    在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下。 首先,谈一下目前为止出现的一些关于移动端适配的技术方案: (1)通过媒体查询的方式即CSS3的meida queries (2)...

    在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下。

    首先,谈一下目前为止出现的一些关于移动端适配的技术方案:

        (1)通过媒体查询的方式即CSS3的meida queries
        (2)以天猫首页为代表的 flex 弹性布局
        (3)以淘宝首页为代表的 rem+viewport缩放
        (4)rem 方式
    

    1.Media Queries

    meida queries 的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:

    @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
      /*你的css代码*/
    }

    优点

    • media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
    • 图片便于修改,只需修改css文件
    • 调整屏幕宽度的时候不用刷新页面即可响应式展示

    缺点

    • 代码量比较大,维护不方便
    • 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
    • 为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式

    2.Flex弹性布局
    以天猫的实现方式进行说明:

    它的viewport是固定的:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    这里写图片描述

    高度定死,宽度自适应,元素都采用px做单位。

    随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。



    3.rem + viewport 缩放
    这也是淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。(1em = 16px)

    PSrem 
    remCSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?
    区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对
    大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁
    反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一
    个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如:p{font-size:14px;font-size:0.875rem;}
    (推荐一个单位转换的工具:http://pxtoem.com/)

    实现原理
    根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

    如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)
    然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。


    这里写图片描述
    mobile-fe4.png
    这里写图片描述
    mobile-fe3.png

    这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width
    这个device-width的计算公式为:设备的物理分辨率/(devicePixelRatio * scale)
    在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio



    4、rem实现
    比如说“魅族”移动端的实现方式,viewport也是固定的:
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

    !function (d) {
        var c = d.document;
        var a = c.documentElement;
        var b = d.devicePixelRatio;
        var f;
    
        function e() {
          var h = a.getBoundingClientRect().width, g;
          if (b === 1) {
            h = 720
          }
          if(h>720) h = 720;//设置基准值的极限值
          g = h / 7.2;
          a.style.fontSize = g + "px"
        }
    
        if (b > 2) {
          b = 3
        } else {
          if (b > 1) {
            b = 2
          } else {
            b = 1
          }
        }
        a.setAttribute("data-dpr", b);
        d.addEventListener("resize", function () {
          clearTimeout(f);
          f = setTimeout(e, 200)
        }, false);
        e()
      }(window);

    css通过sass预编译,设置量取的px值转化rem的变量$px: (1/100)+rem;
    这里写图片描述


    1像素边框高清

    1.淘宝实现方式
    上面说到的淘宝的实现方式即rem+viewport 缩放来实现。

    transform: scale(0.5)

    CSS代码:

    div{
        width: 1px;
        height: 100%;
        display: block;
        border-left: 1px solid #e5e5e5;
        -webkit-transform: scale(.5);
        transform: scaleX(.5);
    }

    缺点:

    圆角无法实现,实现4条边框比较麻烦,并且只能单独实现,如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。

    box-shadow

    实现方法:
    利用CSS对阴影处理的方式实现0.5px的效果。

    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

    优点:

    基本所有场景都能满足,包含圆角的button,单条,多条线。

    缺点:

    颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。
    大量使用box-shadow可能会导致性能瓶颈。
    四条边框实现效果不理想。

    2.图片实现

    使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。

    渐变 linear-gradient (50%有颜色,50%透明)

    单条线:

    div{
        height: 1px;
        background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 100% 1px;
    }

    多线条:

    div{
        background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
        -webkit-linear-gradient(bottom, transparent 50%, #000 50%),
        -webkit-linear-gradient(left, transparent 50%, #000 50%),
        -webkit-linear-gradient(right, transparent 50%, #000 50%);
        background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
        background-repeat: no-repeat;
        background-position: top left, bottom left, left top, right top;

    优点:
    可以设置单条,多条边框
    可以设置颜色

    缺点:
    大量使用渐变可能导致性能瓶颈
    代码量大
    多背景图片有兼容性问题



    展开全文
  • 移动端适配的几种方式

    千次阅读 2019-06-12 01:12:41
    百分比适配方式 这种方法,只是宽度能适配,高度不能适配,只能设置某个高度固定死 需求:是四个div高度为100px,宽度等宽横向排列 <!DOCTYPE html> <html lang="en"> <head> <meta ...

    百分比适配方式

    这种方法,只是宽度能适配,高度不能适配,只能设置某个高度固定死

    需求:是四个div高度为100px,宽度等宽横向排列

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width,user-scalable=no">
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 25%;
                height: 100px;
                float: left;
            }
            .box1 {
                background: red;
            }
            .box2 {
                background: blue;
            }
            .box3 {
                background: green;
            }
            .box4 {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
    </html>

     

     

    动态生成viewport适配方式

    这种方式其实是动态设置缩放比例,动态创建meta标签,并且将计算出来的缩放比例放到这个标签的content属性里面

    如果目标尺寸设置320,那么整个屏幕宽度就是320px,设置为750那么整个屏幕就是750px,这样我们页面中的每个元素就可以根据设计图来设置宽高了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            (function(){
                var w = window.screen.width;
                var targetW = 320;
                var scale = w/targetW; //当前尺寸/目标尺寸
                var meta = document.createElement("meta");
                meta.name = "viewport";
                meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
                console.log(scale);
                document.head.appendChild(meta);
            })();
        </script>
        <!--
        <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
        -->
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 80px;
                height: 100px;
                float: left;
            }
            .box1 {
                background: red;
            }
            .box2 {
                background: blue;
            }
            .box3 {
                background: green;
            }
            .box4 {
                background: yellow;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </body>
    </html>

     

     

    rem适配方式

    rem适配方式第一步首先需要设置视口的约束(固定的)

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    先来看一下在rem适配之前是怎么样的

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <title>Title</title>
    </head>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
    <body>
      <div class="box"></div>
    </body>
    </html>

    分析运行结果,当屏幕的宽度是320的时候,这个box的宽度比例是200/320,当换一个手机屏幕大小不一样的,比如375的那么box的宽度比例是200/375

    那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了,所以呈现的效果也是不一样的

    那么对于这个问题可以使用rem来做适配,rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度,这样整个屏幕就变成了1rem为基准,然后在设置每个元素的时候试用rem来做单位

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <title>Title</title>
    </head>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width:2rem;
        height: 0.5rem;
        background-color: red;
      }
    </style>
    <script>
      (function () {
        // 获取屏幕区域的宽度
        var w = document.documentElement.clientWidth
    
        // 获取html根元素
        var htmlNode = document.querySelector('html')
    
        // 设置字体大小
        htmlNode.style.fontSize = w + 'px'
      })()
    </script>
    <body>
      <div class="box"></div>
    </body>
    </html>

    这样当我们屏幕宽度是320的时候,1rem就等于320 ,2rem就等于2*320,当屏幕宽度是375的时候1rem就等于375,也就是说1rem会随着屏幕的宽度来变化适应

     

     

    其他适配插件

    项目开发中可以使用上面这几种方式去做移动端的适配也可以使用一些插件来帮我们做这个适配,比如:lib-flexible和postcss-px2rem

    使用方法查看这篇文章:基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    展开全文
  • 前端移动端适配总结

    万次阅读 多人点赞 2018-02-28 10:29:49
    meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码:&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;但是,很多小伙伴只是感性的...
  • 谈谈移动端屏幕适配的几种方法

    千次阅读 2018-07-09 17:48:14
    文/腾讯 莫振中移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力。在使用了腾讯优测进行软件测试后,问题得到了有效解决...
  • 移动端Web页面适配方案

    万次阅读 2017-12-01 14:12:27
    name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> ...手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/I
  • 移动端 H5 --页面适配(二)

    万次阅读 2018-08-15 10:14:29
    在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端,由于...
  • 移动端三种适配方案

    千次阅读 2019-06-11 10:46:17
    1.meta-viewport适配 背景 viewport:中文的意思就是“视口”,通常就是浏览器用于显示页面的区域,但是在移动端,viewport一般都要大于浏览器的可视区域,保证PC页面在移动页面上面的可视性,这是因为考虑到移动设备...
  • vue项目移动端适配的方法

    万次阅读 2020-10-13 09:32:51
    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途: 例如在Galaxy S III: 例如在iphone6/7/8: ...
  • 移动端屏幕适配(Rem+js方法)

    万次阅读 2018-08-02 21:50:33
    1.什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样。 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距、留白,以及图片...
  • element-ui移动端rem适配

    万次阅读 2018-10-09 17:18:25
    https://segmentfault.com/a/1190000015238394
  • 最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案,亲测有效...
  • UEditor生成适配移动端的HTML

    万次阅读 2020-10-15 17:13:21
    使用getContent()接口,获取编辑器里的内容的HTML文档,用下面的格式去包裹,可以得到一个内容居中,屏幕两边留有一定边距,禁用缩放的页面,这个页面在移动端已经比较好看了:
  • 使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.clientWidth &gt; 640){ require('./style/index.scss'); this.plaform = '...
  • media媒体查询,移动端适配尺寸大全

    万次阅读 2017-08-22 16:33:27
    media媒体查询,移动端适配尺寸大全 @media screen and(min-width: 320px)and(max-width: 359px){ html{ font-size: 12.8px; } }
  • echart 移动端自适应解决办法

    万次阅读 2017-12-26 15:12:42
    如果你的代码里还有一个图表可以使用一下官方提供的自适应代码window.onresize = myChart.resize; 如过有多个图表可以给图表起不同的名字,然后window.onresize = function(){ _myChartline.resize();...
  • 移动端字体大小适配

    千次阅读 2018-10-15 14:54:00
    css3字体有了“rem”单位,来解决屏幕适配问题。 它与px的区别:px设置了字体大小就不可变,rem是可以根据根元素html的字体的大小而变化的。 接下来就是用法: 原理:随着html的font-size的变化,rem变化。 思路:...
  • 兼容移动端的后台管理框架

    千次阅读 2017-06-06 16:19:53
    bootstrap admin:https://adminlte.io/
1 2 3 4 5 ... 20
收藏数 23,490
精华内容 9,396
关键字:

移动端适配