关于移动端适配方案总结

Hibop commented 6 years ago

meta viewport

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

width:是viewport的值,可以指定一个值或者特殊的值(如 device-width 为设备的宽度)

initial-scale:初始缩放

maximum-scale:最大缩放

user-scalable :用户调整缩放,因为这里是no 所以会自动忽略initial-scale和maximum-scale

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

webstorm: <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

媒体查询

如果是同时做web和移动端,需要两套设计图

media query 语法:

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

动态REM方案(大部分主流浏览器都支持了)

这个方案手机专用的

rem是(font size of the root element)的缩写,意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的

rem进行屏幕适配

rem是根元素(html)的fontsize em是自己的fontsize

12像素法则:网页默认fontsize 一般是16,不允许设置比12像素还小的字体(这个浏览器一般会有设置)

这个规则只在chrome里面有效

一切都以宽度为基准(高可以上下滑 ,宽不能左右滑)

用js 设置 html 的fontsize 等于页面的宽度

  var pageWidth = window.innerWidth
  document.write(  '<style>html{font-size:'+pageWidth+'px}</style>')

会完美的按照设计稿的比例显示页面的

移动端常用关键词

1. 物理像素

设备能控制显示的最小单位，物理像素就好比显示器上一个个的点。 pc显示器分辨率是1920*1080 那么物理像素X轴长度就是1920px. 那就是有1920个物理像素的小点.

2. 独立设备像素

也称为CSS像素一般我们写css时长度单位都用px来表示(虚拟出来的像素),巧的是在pc端 1css像素=1物理像素=1px.

3. 设备像素比

也称为DPR这个值是怎么来的呢? (同一方向X或Y轴上)DPR=物理像素/设备独立像素可以通过window.devicePixelRatio 获得这个值，如是pc端那,因为物理像素就等于css像素所以这个值是1. 重点是移动端,移动端window.devicePixelRatio一般都是2或3 早些年还没流向高精密度屏的话就是1了.

4. 关于2倍设计图,

切图的时候要按照设备象素的尺寸来切，比如iphone6宽度375px，图片要按设计稿375 * 2的尺寸出图，因为屏幕会把一个像素渲染出两个像素来，如果还是按375来出图，就会损失一半的质量。切出来2倍的图使用css background-size放在原始尺寸的元素里.

5. border 1px实际比较粗,

网上查的资料原因都是说移动端1px 对应4个物理像素所以变粗. 如果按照750或者640的设备像素设计图布局是不是布局要/2 但是布局距离除以2了原先设计图上的边框1px没有除以2。因此导致切好图布好局整体感觉下来1px边框变粗了。

6.rem布局

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数; 要点"距离","长度"使用rem,"字体大小"使用em;

750设计图假设根元素font-size:100px,那么750/100(方便好计算什么数字都可以)=7.5rem; deviceWidth = 320，font-size = 320 / 7.5 = 42.666px deviceWidth = 375，font-size = 375 / 7.5 = 50px deviceWidth = 414，font-size = 414 / 7.5 = 55.2px deviceWidth = 500，font-size = 500 / 7.5 = 66.666px 如果一个元素在设计稿内是375px 那么就是375px/100=3.75rem; 这个元素在其他deviceWidth 如414下也会等比显示比如 7.5*55.2=207px; 750:375=414:207 都是2

手淘适配方案

Hibop commented 6 years ago

再聊移动端页面的适配

https://juejin.im/entry/5a9d07ee6fb9a028c149f55b

Hibop commented 6 years ago

分享手淘过年项目中采用到的前端技术

https://juejin.im/entry/5a9d07b76fb9a028cb2d2032

Hibop / Hibop.github.io