正文

移动端自适应布局方案尝试

Jmingzi  Jmingzi  2022-08-06  292

关键词：

原文地址：移动端自适应布局方案尝试

问题

刚开始接触移动端H5页面的时候最困扰的几个问题是：

6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！
图片，div等如何等比自适应设计图

后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成，第二点知道了单位rem。

目的

不想因为使用rem而一一去计算设计稿的尺寸，设计稿750的尺寸的标注可以直接在sass中使用；字体不使用rem缩放，原因是：

显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

还一个目的是，在页面没有设置viewport的时候动态设置，并且不让页面有一个“闪现”的过程（也就是刚加载没设置的状态到设置的状态）；页面动态变化时，尺寸相应变化；

尝试

在写H5页面的时候，尽可能少的去写meta标签，我会这样做：

<head>
    <title>viewport test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/style.css">
</head>

就这样简单，然后实现的代码当然是放在head里。因为并没有写viewport，所以得判断加上

if (!metaEl) {
    metaEl = doc.createElement(‘meta‘);
    metaEl.setAttribute(‘name‘, ‘viewport‘);
    metaEl.setAttribute(‘content‘, ‘width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no‘);
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = doc.createElement(‘div‘);
        wrap.appendChild(metaEl);
        doc.write(wrap.innerHTML);
    }
}

然后根据页面的devicePixelRatio缩放

var scale = parseFloat((1 / dpr).toFixed(2));
if (dpr != 1) {
    metaEl.setAttribute(‘content‘, ‘width=device-width,initial-scale=‘+ scale +‘, maximum-scale=‘+ scale +‘, minimum-scale=‘+ scale +‘, user-scalable=no‘);
}

设置根字体大小

// document width
function setDocumentFontSize () {
    var width = docEl.getBoundingClientRect().width;
    docEl.style.fontSize = width / 10 + ‘px‘;
}
setDocumentFontSize();

页面resize监听

var timer;
win.addEventListener(‘resize‘, function() {
    clearTimeout(timer);
    timer = setTimeout(function () {
        setDocumentFontSize();
    }, 300);
}, false);

为了字体不使用rem，需要为documentElement设置data-dpr属性

// document data-dpr set font-size px
var dpr = window.devicePixelRatio;
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
    dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
    dpr = 2;
} else {
    dpr = 1;
}
docEl.setAttribute(‘data-dpr‘, dpr);

sass相关设置

完全根据设计稿尺寸写

// baseFontSize 
$baseFontSize: 75;
@function px2rem($px){
    @return $px/$baseFontSize * 1rem;
}
@function px2rem2($px){
    @return px2rem($px*2);
}

字体大小变化

// 字体大小计算
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

例如：一个简单样式的设置

.test {
    @include font-dpr(10px);
    width: px2rem2(300);
    margin: 0 auto;
    border:1px #dcdcdc solid;
}
img {
    display: block;
    width: px2rem2(355);
    margin: 0 auto;
}

效果示例：

技术分享

可以从图中看出，6p的dpr为3，字体相应为30px，页面缩放了3倍，正式我所想要的。

页面demo源码

<!DOCTYPE html>
<html>
<head>
    <title>viewport test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/style.css">
    <script>
    ;(function (win) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector(‘meta[name="viewport"]‘);

        if (!metaEl) {
            metaEl = doc.createElement(‘meta‘);
            metaEl.setAttribute(‘name‘, ‘viewport‘);
            metaEl.setAttribute(‘content‘, ‘width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no‘);
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement(‘div‘);
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        }

        // document data-dpr set font-size px
        var dpr = window.devicePixelRatio;
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
        docEl.setAttribute(‘data-dpr‘, dpr);

        var scale = parseFloat((1 / dpr).toFixed(2));
        if (dpr != 1) {
            metaEl.setAttribute(‘content‘, ‘width=device-width,initial-scale=‘+ scale +‘, maximum-scale=‘+ scale +‘, minimum-scale=‘+ scale +‘, user-scalable=no‘);
        }

        // document width
        function setDocumentFontSize () {
            var width = docEl.getBoundingClientRect().width;
            docEl.style.fontSize = width / 10 + ‘px‘;
        }
        setDocumentFontSize();

        var timer;
        win.addEventListener(‘resize‘, function() {
            clearTimeout(timer);
            timer = setTimeout(function () {
                setDocumentFontSize();
            }, 300);
        }, false);
    })(window);
    </script>
</head>
<body>
    
    <div class="test">
        显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。
    </div>

    <img src="https://camo.githubusercontent.com/3bd9e24ee11cee86e81dc49c0e5722e9f55e7297/687474703a2f2f7777772e773363706c75732e636f6d2f73697465732f64656661756c742f66696c65732f626c6f67732f323031352f313531312f72656d2d392e6a7067" alt="">
</body>
</html>

欢迎关注我的博客：http://ymblog.net

移动端自适应解决方案

实现移动端自适应大概的几种方法：1.固定宽度，使用一个模式加上少许的媒体查询；2.使用flexbox解决；3.使用百分比加媒体查询；4.使用rem。一、如果是简单app，排版不管分辨率怎么变，关键元素宽高和位置固定，只是元素容器... 查看详情

移动端自适应处理页面布局

处理页面大概会有若干种方案:第一种就是使用bootstrap;自己使用自适应单位常用的rem，em,及别人封装好的插件flexble.js;在使用flexble.js;时发现两个问题，高度没有很好的展现，有时会比设计稿低，会造成页面扁平不好看，第二种就... 查看详情

处理移动端自适应布局的方法-calc()与vw

　　在处理移动端自适应布局时，目前前端最流行的方法应该就是使用媒体查询，来设置HTML的字体大小，然后用rem为单位对Dom的宽高进行设置，这个方法的优势在于兼容性方面很好，劣势则在于当前市场上不同的机型太多，尺... 查看详情

vue3.0+vite实现移动端自适应布局

参考技术A然后再main.ts中引入amfe-flexible最后启动项目就会发现px已经是自适应的单位,如果想用原来的px只需改成大写的PX单位即可查看详情

移动端自适应方案(代码片段)

...显示精度问题一像素显示问题，缩放导致的像素适应问题移动端的自适应问题http://www.cnblogs.com/520yan...http://www.cnblogs.com/520yan...https://mp.weixin.qq.com/s?__...https://github.com/amfe/artic...1、查看详情

（转）移动端自适应方案

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

pc、移动端自适应布局方案

参考技术A写在前面做一个PC端的网页,设计图是1920X1080的.要在常见屏上显示正常(比例正确可)1280X7201366X7681440X9001920X1080使用了以下几种方案1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框... 查看详情

移动端自适应解决方案

http://dudodo.cc/2017/06/01/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/#more 设计稿640640px=6.4rem100px=1rem10px=0.1rem1px=0.01rem (functio 查看详情

移动端自适应

此代码加到head标签里面，加入后可随不同机型的移动设备，设置html的fontSize大小，这样子用rem可作为解决移动端自适应的方案 !function(N,M){functionL(){vara=I.getBoundingClientRect().width;a/F>750&&(a=750*F);vard=a/10;I.style.fontSize=d+"px 查看详情

vue判断电脑还是手机设备pc端自适应移动端rem布局

参考技术Apc端所有的页面和移动端都写在一个项目里这时候就需要我在登录的时候判断是什么设备然后跳到相应的页面采用不同的样式可以写在一个js文件里，然后在main.js里统一引入如果是手机端的话我要采用rem布局设计稿是640... 查看详情

echars移动端自适应学习笔记

有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要ECharts内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似 CSSMediaQuery 的自适应能力。ECharts组件的... 查看详情

vue-cli+postcss实现移动端自适应

基于vue-cli3创建一个移动端项目vueaddvue-h5cdvue-h5npmrunserve安装postcss相关插件由于vue-cli已经内置了postcss，只需要安装相关插件，就可以实现vw/vh自适应布局。npmi--savepostcss-aspect-ratio-minipostcss-px-to-viewportpostcss-write-svgpostcss-cssnext 查看详情

vw实现移动端自适应页面

一、设备支持情况测试网站：https://caniuse.com/#search=vwcss3test：https://airen.github.io/css3test/，https://github.com/airen/css3test1、PC端2、mobile端二、vw的不足比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响... 查看详情

移动端自适应方案(代码片段)

pc端自适应布局

截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：天猫内容区... 查看详情

移动端自适应字体大小

设置1rem=100pxwindow.addEventListener((‘orientationchange‘inwindow?‘orientationchange‘:‘resize‘),(function(){functionc(){varhtml=document.documentElement;html.style.fontSize=100*(html.clientWidth/375)+‘ 查看详情

px2rem移动端自适应方案

...那么宽度则为640px或750px，因此先在chrome调试工具中获取移动端的<html>根元素的font-size的值，然后在配置vue-loader时将其设为remUnit参数的值:这样就可以根据设计稿尺寸，在开发时写CSS像素的绝对值，即px单位，px2rem会自动将尺... 查看详情

h5可伸缩布局方案

https://github.com/amfe/lib-flexible ib.flexible移动端自适应方案，相关文章请参考此处Update【2016年01月13日】首先，由衷的感谢@完颜(@SMbey0nd)帮忙踩了这个坑，回想起iOS从7~8，从8~9，都踩过只至少一个坑，真的也是醉了。手淘这边的fl... 查看详情