vue移动端自适应

方案1:

直接引入js  (自己 写的动态改变fontsize的js)

function htRem() {
    var ww = document.documentElement.clientWidth;

    if (ww > 750) {

        ww = 750;

    }

    document.documentElement.style.fontSize = ww / 7.5 + "px";

}


htRem();

window.onresize = function() {

    htRem();

};

 

在main.js中import引入即可

方案二:手淘的 lib-flexible + rem

 

配置 flexible

安装 lib-flexible

 

在命令行中运行如下安装:

 

 npm i lib-flexible --save
 

引入 lib-flexible

在项目入口文件 main.js 里 引入 lib-flexible

1

2

// main.js

import 'lib-flexible'

添加 meta 标签

在项目根目录的 index.html 中添加如下 meta

1

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

px 转 rem

实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 px2rem 这个工具,它有 webpack 的 loader:px2rem-loader

安装 px2rem-loader

在命令行中运行如下安装:

1

npm i px2rem-loade --save-dev

配置 px2rem-loade

在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。

我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10,这里我们假设设计稿宽为 750px。

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 // utils.js


var cssLoader = {

    loader: 'css-loader',

    options: {

        minimize: process.env.NODE_ENV === 'production',

        sourceMap: options.sourceMap

    }

}


var px2remLoader = {

    loader: 'px2rem-loader',

    options: {

        remUnit: 75

    }

}

// utils.js

var cssLoader = {

loader: 'css-loader',

options: {

minimize: process.env.NODE_ENV === 'production',

sourceMap: options.sourceMap

}

}

var px2remLoader = {

loader: 'px2rem-loader',

options: {

remUnit: 75

}

}

// ...

并放进 loaders 数组中

 

1

2

3

4

 

// utils.js

function generateLoaders(loader, loaderOptions) {

var loaders = [cssLoader, px2remLoader]

// ...

修改配置后需要重启,然后我们在组件中写单位直接写 px,设计稿量多少就可以写多少了

 

纯CSS3使用vw和vh视口单位实现自适应-------移动端适配 (vw vh)

 

做法一:仅使用vw作为CSS单位

在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下,我们遵守:

1.对于设计稿的尺寸转换为vw单位,我们使用Sass函数编译

 
  1. //iPhone 6尺寸作为设计稿基准

     

    $vm_base: 375;
    
    @function vw($px) {
    
    @return ($px / 375) * 100vw;
    
    }

     

2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位

 

.mod_nav {

background-color: #fff;

&_list {

display: flex;

padding: vm(15) vm(10) vm(10); // 内间距

&_item {

flex: 1;

text-align: center;

font-size: vm(10); // 字体大小

&_logo {

display: block;

margin: 0 auto;

width: vm(40); // 宽度

height: vm(40); // 高度

img {

display: block;

margin: 0 auto;

max-width: 100%;

}

}

&_name {

margin-top: vm(2);

}

}

}

}

 

3.1物理像素线(也就是普通屏幕下 1px ,高清屏幕下 0.5px 的情况)采用 transform 属性 scale 实现。

 
  1.  

    .mod_grid {
    
    position: relative;
    
    &::after {
    
    // 实现1物理像素的下边框线
    
    content: '';
    
    position: absolute;
    
    z-index: 1;
    
    pointer-events: none;
    
    background-color: #ddd;
    
    height: 1px;
    
    left: 0;
    
    right: 0;
    
    top: 0;
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    
    -webkit-transform: scaleY(0.5);
    
    -webkit-transform-origin: 50% 0%;
    
    }
    
    }
    
    ...
    
    }

     

4.对于需要保持高宽比的图,应改用 padding-top 实现

 
  1.  

    .mod_banner {
    
    position: relative;
    
    padding-top: percentage(100/700); // 使用padding-top
    
    height: 0;
    
    overflow: hidden;
    
    img {
    
    width: 100%;
    
    height: auto;
    
    position: absolute;
    
    left: 0;
    
    top: 0;
    
    }
    
    }

     

由此,我们能够实现一个常见布局的页面效果如下:
layout
体验地址点击此处

做法二:搭配vw和rem,布局更优化

这样的页面虽然看起来适配得很好,但是你会发现由于它是利用视口单位实现的布局,依赖于视口大小而自动缩放,无论视口过大还是过小,它也随着视口过大或者过小,失去了最大最小宽度的限制。

当然,你可以不在乎这样微小的不友好用户体验,但我们还是尝试下追求修复这样的小瑕疵吧。

于是,联想到不如结合rem单位来实现布局?rem 弹性布局的核心在于动态改变根元素大小,那么我们可以通过:

  1. 给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
  2. 限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度

这样我们就能够实现对布局宽度的最大最小限制。因此,根据以上条件,我们可以得出代码实现如下:

 

利用一种设计稿来计算:规定html的根fontsize为10等分之一的宽度,1rem

px2vw( $px ){

  return $px / 75 * 1rem对应的 xx vw值  ------返回对应的vw数值

}

1rem对应的xx vw值 = 75 / (750/2) * 100 vw   (html根fontSize大小对应的 vw值)

不同尺寸实际设备下,css中对应的高度/宽度用 xxx vw单位, 计算成对应的 xxx vw * 1vw代表的px尺寸 = yyy px尺寸

1 vw = 1% * 实际设备的视窗宽度尺寸

  1.  

    // rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
    
    $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
    
    @function rem($px) {
    
    @return ($px / $vm_fontsize ) * 1rem;
    
    }
    
    // 根元素大小使用 vw 单位
    
    $vm_design: 750;
    
    html {
    
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    
    // 同时,通过Media Queries 限制根元素最大最小值
    
    @media screen and (max-width: 320px) {
    
    font-size: 64px;
    
    }
    
    @media screen and (min-width: 540px) {
    
    font-size: 108px;
    
    }
    
    }
    
    // body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
    
    body {
    
    max-width: 540px;
    
    min-width: 320px;
    
    }

     

相对于做法一,个人比较推崇做法二,有以下两点原因:

第一,做法二相对来说用户视觉体验更好,增加了最大最小宽度的限制;

第二,更重要是,如果选择主流的rem弹性布局方式作为项目开发的适配页面方法,那么做法二更适合于后期项目从 rem 单位过渡到 vw 单位。只需要通过改变根元素大小的计算方式,你就可以不需要其他任何的处理,就无缝过渡到另一种CSS单位,更何况vw单位的使用必然会成为一种更好适配方式,目前它只是碍于兼容性的支持而得不到广泛的应用。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值