移动端页面的viewport以及布局设计

时间：2024-02-15 13:55:37

1.viewport

viewport在移动页面中是相当重要的概念，引用两篇文章：
一篇真正教会你开发移动端页面的文章(一)
一篇真正教会你开发移动端页面的文章(二)

2.如何根据psd稿件，设计页面

在上面的后一篇文章有详细的说明，主要是设置 viewport 中的缩放比例，以及 HTML 元素的font-size，设置尺寸时使用rem，但文字大小另行使用媒体查询另行设置px单位

方法一：

1）动态设置 viewport 缩放比例

var scale = 1 / window.devicePixelRatio;
document.querySelector(\'meta[name="viewport"]\').setAttribute(\'content\',\'width=device-width,initial-scale=\' + scale + \', maximum-scale=\' + scale + \', minimum-scale=\' + scale + \', user-scalable=no\');

2）动态设置HTML的font-size

const rate = 10;  // 设置一个比例常数，可任意设置
document.documentElement.style.fontSize = document.documentElement.clientWidth / rate + \'px\';

假设设计稿的总宽度是 W，那么 1rem 是 W/rate px；因此在设置设计稿尺寸w0时，其应该设置为 w0/(W/rate) rem

这种方法，在每次设置尺寸时 很有能除不尽，需要计算器，会比较麻烦

方法二：

1）设置 viewport 固定缩放比例（为1）

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  1. 动态设置HTML的font-size，将设备像素比带入到HTML字体的大小中
const rate = 100;  // 设置一个比例常数，可任意设置
const W = 750;  // 实际设计稿的总宽度
document.documentElement.style.fontSize = rate * document.documentElement.clientWidth / W + \'px\';  //

在设置设计稿尺寸w0时，其应该设置为 w0/rate rem
因为 rate 可以取 10的倍数，计算实际尺寸时，比较方便

注：方法一，方法二 中的 js 代码，最好一开始就运行

方法三：（使用vw布局）

vw单位实现弹性布局
我们先来看看这vw vh单位 w3c的官方解释
vw：1% of viewport’s width
vh：1% of viewport’s height

viewport即浏览器可视区域大小
我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight
在移动端我们一般都可以认为，100vw就是屏幕宽度。若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可

// 以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

// 假设一个div元素在视觉稿中，宽度为120px，字体大小为12px
div {
    width: vw(120);
    font-size: vw(12);
}

其他文章

关于移动端页面适配布局：
移动端Web页面适配方案（整理版）
再聊移动端页面适配，rem和vw适配方案.
【移动端布局】抛弃rem，使用vw.
flexible.js 移动端自适应方案.
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件.

相关文章