手机端如何根据设计图尺寸快速开发

本文介绍了两种手机端设计图尺寸快速开发的方法:一是使用meta viewport动态设置初始缩放比例,二是利用rem布局。通过动态调整initial-scale值和设置Html的font-size,可以实现设计图在不同屏幕尺寸上的等比缩放。推荐使用rem布局,通过将设计图尺寸除以100转换为rem单位,便于开发和适配。
摘要由CSDN通过智能技术生成

两种常用的解决方案

  • 1、通过动态设置 viewport的 width 和 initial-scale

  • 2、通过动态设置跟元素Html的font-size 即 rem解决方案

方法一 meta viewport

meta标签大家都很熟悉了,首先来看一下meta viewport 的6个属性:

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

一般情况下width的值设置为width-device即可,即当前设备的屏幕宽度,我们可以通过window.screen.width获取。所以要想在不同手机上自适应,我们就要动态的改变initial-scale(初始缩放值),并且设置user-scalable=no禁止用户手动缩放页面。

举一个例子:如果设计师给的尺寸是750px的,如何把750px的设计图等比缩放到我们当前宽度的手机上呢?假如当前手机的屏幕宽度是恰好是750px,那initial-scale就等于1好了完全不用缩放。假如当前的手机宽度是375px(iphone6/7/8),那岂不是要缩放一倍了(initial-scale=0.5),对的,缩放的倍数就等于当前手机屏幕宽度除以设计图的宽度。如果设计师给的是640px宽的图,针对不同的手机initial-scale的值是多少呢?(答案就在上一句)。

所以initial-scale的值是要动态获取的然后将meta标签添加到header标签里面,这就要用js操作dom了(js基础知识)。见下代码示例:

<script>
    var _vwidth = window.screen.width;
    var _scale = _vwidth / 750;
    var _meta = document.createElement('meta');
    _meta.setAttribute('name', 'viewport');
    _meta
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值