移动端布局

2019-02-10

响应式网站设计

什么是响应式布局

服务器根据不同的浏览器用户端，为用户呈现不同的页面效果。
可以让一个网站兼容不同分辨率的设备，给用户更好的视觉使用体验。
移动互联网催生了响应式布局的诞生。

响应式设计优缺点
优点:
解决了设备之间的差异化展示,让不同的设备达到最优的视觉体验.
缺点:
兼容性代码多,工作量大,加载速度受影响
对原有网站布局会产生影响,用户判断未必精确.

响应式设计的原则

移动优先：在设计的初期就考虑页面如何在多终端展示
渐进增强：充分发挥硬件设备的最大功能

如何实现响应式布局

css3-Media Query：代码简单（媒体查询）
借助原生 Javascript：主要用于老浏览器上，加载速度慢，不推荐
第三方的开源框架，如 bootstrap，可以很好的实现浏览器对响应式的支持

基本语法
外联 CSS 语法

<link
  rel="“stylesheet”"
  href="“wide.css”"
  media="screen and (min-width:320px)"
/>
<link
  rel="“stylesheet”"
  href="“mobile.css”"
  media="screen and (max-width:1000px)"
/>

内嵌样式的语法

1
2
3

<style>
  @media all and  (min-width:500px) { … }
</style>

CSS 2.1 支持 9 种媒体类型——注意：媒体类型名区分大小写
braille ——触觉反馈设备
embossed ——盲文印刷设备
handheld ——小型或手持设备
print ——打印机
projection ——投影图像，如幻灯
screen ——计算机显示器
speech ——语音合成器
tty ——打字机
tv ——电视类
all 所有

响应式不同分辨率设置

1024px 显屏

1	@media screen and (max-width : 1024px) { /* 样式写在这里 */ }

800px 显屏

1	@media screen and (max-width : 800px) { /* 样式写在这里 */ }

640px 显屏

1	@media screen and (max-width : 640px) { /* 样式写在这*/ }

iPad 横板显屏

1 2	@media screen and (max-device-width: 1024px) and (orientation: landscape) {/* 样式写在这 */ }

iPad 竖板显屏

1 2	@media screen and (max-device-width: 768px) and (orientation: portrait) {/* 样式写在这 */ }

移动端和 PC 端页面布局的不同点

显示设备（屏幕）
操作（鼠标、指尖）
浏览器内核:移动端不用考虑 ie，但是各种浏览器内核（手机自带）、微信浏览器内核
运行设备移动设备（轻便、迅速、便携） pc 端（体验）
网络不同移动 4g（注重速度） pc 光纤（注重体验速度）

做移动端页面和 pc 端页面使用的方法也不同

页面设置不同：
1.Meta 标签设置 2.单位=======用来适应不同的移动端屏幕尺寸；

Px 像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率；
Pt 磅点打印的尺寸
Em 相对单位，相对于父级的 font-size 1em=父级的 font-size（直接的父级）
Rem 相对单位，相对于根元素的 font-size 1rem=根元素的 font-size
Vw，相对于屏幕的宽度，1vw==1%屏幕的宽度
Vh 相对单位，相对于屏幕高度，1vh==1%屏幕的高度

Meta 标签的设置不同

<meta
  name="viewport"
  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>

width=device-width:宽度等于当前设备的宽度
intial-scale:页面首次被显示是可视区域的缩放比例，取值 1.0 则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0 将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

Meta 标签的设置不同及其不同的效果（扩展）

1.强制让文档与设备的宽度保持 1：1

<meta
  name="viewport"
  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>

2.忽略页面中的数字识别为电话号码

1 2	<meta name="format-detection" content="telephone=no" /> 3.忽略页面中的邮箱格式为邮箱 <meta name="format-detection" content="email=no" />

4.在 web app 应用下状态条（屏幕顶部条）的颜色

1	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

认识 ppi 、dpr 、dpi

屏幕尺寸：指的是屏幕对角线的长度
分辨率：是指宽度上和高度上最多能显示的物理像素点个数
点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小
PPI:屏幕像素密度，即每英寸(1 英寸=2.54 厘米)聚集的像素点个数，这里的一英寸还是对角线长度
DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和 PPI 是一个意思
设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。
设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css 像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。
css 像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)
DPR(设备像素比)：设备像素比 = 设备像素 / css 像素。(在 Retina 屏的 iphone 上，DPR 为 2，1 个 css 像素相当于 2 个物理像素)
每英寸像素(pixel per inch, ppi/PPI): 它表示的是每英寸所拥有的像素(pixel)数目，更确切的说法应该是像素密度，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。数值越高，代表显示屏能够以越高的密度显示图像。
设备像素比(device pixel ratio, dpr/DPR): 它描述的是未缩放状态下，设备像素和 CSS 像素的初始比例关系，也可以解释为默认缩放比例。如何理解这个概念呢？通俗来说，它是指在开发中 1 个 CSS 像素占用多少设备像素，如 dpr=2 代表 1 个 CSS 像素用 2x2 个设备像素来绘制，这是因为 Retina 屏幕把 2x2 个像素当 1 个像素使用。比如原本 44 像素高的顶部导航栏，在 Retina 屏上用了 88 个像素的高度来显示。导致界面元素都变成 2 倍大小

vw 和 rem 做适配

只用 vw 单位做适配
如果设计稿的尺寸为 750px；那么 100vw=750px; 1vw=7.5px
vw 结合 rem 做适配
假如 ui 图的宽度为 1920px，又因为 vw 会把宽度分为 100 份，那 1vw=19.2px，1920/100=19.2（px），现在这样还是不行，不好算，那就算出每 100px 是多少 vw，100px=(约等于)5.21（vw），这样，设根字体 html 为 5.21vw，则 0.18rem=18px（1rem=100px）

1vw=19.2px 1px= 0.05208 vw 100px=5.21vw
html{font-size:5.21vw} 5.21vw=100px=1rem

Js 方法获取 HTMLfontsize（需要手动刷新）

<script>
  var bw = document.documentElement.clientWidth / 7.2 + "px"; //获取屏幕宽度)除以7.2，添加上“px”，7.2是设计稿的宽度除以100后得到的值
  var htmlTag = document.getElementsByTagName("html")[0]; //在文档里面通过元素名来获取元素，html
  htmlTag.style.fontSize = bw; //把计算后的值复制给根元素的font-size;1rem=100px
</script>

<script>
  window.onload = function () {
    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
                           为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(640, 100);
  };
  window.onresize = function () {
    getRem(640, 100);
  };
  function getRem(pwidth, prem) {
    var html = document.getElementsByTagName("html")[0];
    var oWidth =
      document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = (oWidth / pwidth) * prem + "px";
  }
</script>

移动端适配方案总结

移动端的适配方案

Vw 单位做适配
1、设计稿尺寸=100vw 算出 1vw=？Px
2、量出来的尺寸换算成 vw 单位书写 css 中；
Vw 结合 rem 适配
1、设计稿的尺寸=100vw。算出 1vw=？Px；
2、算出 100px=？？vw；
3、html{font-size:？？vw}这时 1rem=100px
4、量出的尺寸除以 100，就是得出的 rem 单位的值
Js 适配
1、引用 js；注意修改 js 中的一个参数，参数值设置成设计稿的尺寸
2、直接 1rem=100px;量出的尺寸除以 100，就是得出的 rem 单位的值

本文作者：人模人样的搬砖老段
本文链接：移动端布局
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/01/27