盒子
盒子
文章目录󰁋
  1. 一、为什么要做适配
  2. 二、适配方案
  3. 三、单位
  4. 四、百分比适配(常用)
  5. 五、Rem适配(常用)
  6. 六、缩放比适配
  7. 七、像素比适配
  8. 八、小结

移动端布局适配方案

一、为什么要做适配

  • 为了适应各种移动端设备,完美呈现应有的布局效果
  • 各个移动端设备,分辨率大小不一致,网页想铺满整个屏幕,并在各种分辨下等比缩放

二、适配方案

  • 固定高度,宽度百分比适配-布局非常均匀,适合百分比布局
  • 固定宽度,改变缩放比例适配-什么情况都可以
  • Rem适配
  • 像素比适配

三、单位

  • em根据元素自身的字体大小计算,元素自身 16px 1em=16px
  • Rem R -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸

四、百分比适配(常用)

固定高度,宽度百分比适配

  • 根据设置的大小去设置高度,单位可以用px 百分比 auto
  • 常用Flex布局
  • 百分比宽度

640设计稿为例,在外层容器上设置最大以及最小的宽

1
2
3
4
5
#wrapper {
max-width: 640px; /*设置设计稿的宽度*/
min-width: 300px;
margin: 0 auto;
}

后面的区块布局都用百分比,具体元素大小用px计算

  • 也就是宽度用百分比,高度用px
  • 高度以及图片不要定死,让它自动撑开

五、Rem适配(常用)

  • 根据屏幕的分辨率动态设置html的文字大小,达到等比缩放的功能
  • 保证html最终算出来的字体大小,不能小于12px
  • 在不同的移动端显示不同的元素比例效果
  • 如果htmlfont-size:20px的时候,那么此时的1rem = 20px
  • 把设计图的宽度分成多少分之一,根据实际情况

  • rem做盒子的宽度,viewport缩放

head加入常见的meta属性

1
2
3
4
5
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--这个是关键-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">

把这段代码加入head中的script预先加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// rem适配用这段代码动态计算html的font-size大小
(function(win) {
var docEl = win.document.documentElement;
var timer = '';

function changeRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) { // 750是设计稿大小
width = 750;
}
var fontS = width / 10; // 把设备宽度十等分 1rem=10px
docEl.style.fontSize = fontS + "px";
}
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(changeRem, 30);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { //清除缓存
clearTimeout(timer);
timer = setTimeout(changeRem, 30);
}
}, false);
changeRem();
})(window)

布局细节

  • 结构用section区块划分更语义化
  • 然后在body设置宽度
1
2
3
4
body {
width: 10rem;
margin: auto;
}

后面的区块都以百分比布局

1
2
3
4
5
6
7
<div class="wrapper">
<header><header>
<section><section>
<section><section>
<section><section>
<section><section>
</div>
1
2
3
4
section,
header {
width: 100%;
}

把视觉稿中的 px 转换成 rem

首先,目前日常工作当中,视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于 640px750px 以及 1125px 宽度为准。甚至为什么?大家应该懂的(考虑Retina屏)

假定设计稿的大小为750,那么我们则将整个图分成10等份来看。<html> 对应的 font-size75px

1
2
3
html{
font-size: 75px;
}
  • 这样一来,对于视觉稿上的元素尺寸换算,只需要原始的 px值 除以 rem基准值 即可

那么,我们现在就可以比对设计稿,比如设计稿中,有一个div元素,宽度,高度都为20px,那么我们这样写即可(可以用 markman标准设计稿的元素大小)

1
2
3
4
div {
height: 0.27rem; /*20/75*/
width: 0.27rem;
}
  • 动态计算的rem最后会帮我们动态计算元素在不同屏幕下的宽高
  • 对于设计稿上的每个元素的尺寸在设计稿大小已知的时候,我们需要测量出,然后在用测量的宽高除以设计稿750的十分之一也就是75,得到我们想要的rem。而rem是根据屏幕动态变化的,也就达到了适配的效果。也就是同一套设计稿运用在不同的设备上。

比如当我们切换到320设备大小的时候,这时候1rem=32px; div的像素实际是0.27*32=8.64px 0.27是我们在已知设计稿是750的情况下计算出来的,rem用来动态计算而已

  • 对于margin padding line-height width height使用rem计算

如何快速计算

在实际生产当中,如果每一次计算 px 转换 rem ,或许会觉得非常麻烦

  • CSSREM 是一个CSSpx 值转 rem 值的Sublime Text3自动完成插件
  • 插件效果

插件使用方法

  • 安装

    • 下载本项目,比如:git clone https://github.com/flashlizi/cssrem
    • 进入packages目录:Sublime Text -> Preferences -> Browse Packages
    • 复制下载的cssrem目录到刚才的packges目录里。
    • 重启Sublime Text
  • 配置参数

    • 参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem
    • px_to_rem - pxrem的单位比例,默认为40【根据设计稿来设置,如设计稿750,我们取十分之一即75】。
    • max_rem_fraction_length - pxrem的小数部分的最大长度。默认为6
    • available_file_types - 启用此插件的文件类型。默认为:[“.css“, “.less“, “.sass“]。

文字适配的解决方案

  • 对于一些标题性的文字,我们依然可以用rem。让他随着屏幕来进行缩放,因为标题性文字一般较大,而较大的文字,点阵对其影响就越小。这样,即使出现奇怪的尺寸,也能够让字体得到很好的渲染。
  • 对于一些正文内容的文字(即站在使用者的角度,你不希望他进行缩放的文字)。我们采用px来进行处理

六、缩放比适配

固定宽度,改变缩放比例适配

  • 设计图的宽度就是网页显示的宽度
  • 改变视口的缩放比例
  • 页面宽度固定死
1
2
3
4
5
6
7
8
9
10
11
12
13
// 缩放比例适配方案--用这个代码 
var width = window.screen.width,
fixedW = 320, //设计稿宽度的一半
scale = width / fixedW, // 缩放比例
meta = document.createElement('meta'),
metaAttr = {
name : 'viewport',
content : 'width='+fixedW+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=0'
};
for (var key in metaAttr) {
meta[key] = metaAttr[key];
}
document.head.appendChild(meta);

七、像素比适配

  • window.devicePixelRatio
  • 物理像素是手机屏幕分辨率
  • 独立像素 指css像素 屏幕宽度
  • 像素比 = 物理像素 / css宽度
  • 获取设备的像素比 window.devicePixelRatio

八、小结

关于移动端布局方案有很多,rem和百分比运用最多的

相关文章阅读

支持一下
扫一扫,支持poetries