移动端H5开发经验

 

 

视口标签

标准的viewport设置：视口宽度和设备保持一致，默认缩放比例1.0，最大最小允许缩放比例1.0，不允许用户自行缩放

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

 

物理像素和物理像素比

物理像素就是我们说的分辨率，pc端页面，1个px等于1个物理像素，但是移动端就不尽然

1个px能显示的物理像素点的个数，叫做物理像素比或者屏幕像素比。

如iphone8中，1px开发像素 = 2px物理像素

为什么现在出的手机物理像素比都是2倍以上？ 因为视网膜屏幕技能的出现（摩托罗拉公司推出），将更多的像素点塞入屏幕 = 分辨率越高 = 越清晰

 

二倍图

手机比起PC的物理像素比变大了， 导致文字看起来会大一些，但是文字无所谓，如果是图片的话，会变得更模糊一些。

如需要一个50*50像素的图片直接放到我们的iphone8中，因为物理像素比的概念会放大2倍，导致变成100*100，就会模糊

所以 我们本身就先放一个100*100的图片，然后手动将这个图片缩小为50 * 50，这样放大完和图片本身的大小就是一样的，就不会出现模糊了

总结：我们准备的图片比我们实际需要的大2倍，这种方式就是2倍图

 <img src="images/apple100px.jpg" alt="" style="width: 50px;height: 50px;">

 

背景缩放   

      background: url(images/dog.jpg) no-repeat;
      background-size: 500px 200px;
      background-size: 500px ；
      只写了一个参数的话，肯定是宽度， 高度省略了，会进行等比例缩放
      cover完全覆盖div盒子，可能有部分背景图显示不全
      contain 宽度和高度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了，可能有部分显示不全

 

背景2倍图的实现：结合background-size

    div {
      width: 50px;
      height: 50px;
      background: url(images/apple100px.jpg) no-repeat;
      background-size: 50px 50px;
    }

 

移动端主流方案

    1.单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex弹性布局(强烈推荐)
• less+rem+媒体查询布局
• 混合布局

   2.响应式页面兼容移动端（其次）

• 媒体查询
• bootstrap

 

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题，可以放心使用h5标签和css3样式

同时我们浏览器的私有前缀我们只需要考虑加webkit即可

QQ浏览器 百度浏览器 UC浏览器 = 基于webkit内核

移动端css初始化推荐使用 normalize.css

 

传统 or css3盒子模型

移动端可以全部css3盒子模型

PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，就选择css3盒子模型

 

特殊样式处理

去除a标签点击高亮

-webkit-tap-hightlight-color: transparent

在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance: none;

禁用长按页面时的弹出菜单

img, a {

-webkit-touch-callout: none

}

 

Grid布局

// auto-fill可以换成想要的数量
.container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 5px;
}
.sub{
    width: 100px; height:100px;
    background-color: skyblue;
    margin-top: 5px;
}



// 新的写法

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100% 100%;
    grid-gap: 10px;
}

<div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
</div>

 

rem布局 + less

页面拉升时， 文字可以随着页面大小发生变化，宽高都可以等比例缩放

1.通过媒体查询 改变html文字大小

2.通过js 监听页面宽度来设置html字体大小

为什么结合less来使用？

正常的css 无法支持计算，需要计算器计算出rem值

less编译：Easy LESS插件用来把less文件编译为css文件，安装后重新加载下vscode

作用：只需要保存一下less文件，会自动生成css文件

需要写伪类或者伪元素，可以这样写

a {
    color: red;
    &:hover {
        color: blue;
    }
}

&符号指代选择器本身 

// 选择前三个元素
.item {
    &:nth-child(-n + 3) {
        color: red
    }
}

less运算（注意运算符左右需要空格隔开）

两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准

两个数参与运算，如果2个数都有单位，而且不一样的单位，最后的结果以第一个单位为准

div {
  width: (80 / 16rem);
}

 

 

 

rem适配方案技术使用（市场主流）

技术方案1: less + 媒体查询 + rem

技术方案2（推荐）：flexible.js + rem

 

设计稿常见尺寸宽度

iphone 4.5 640px

iphone 678  750px

android 常见320px、360px、375px、384px、400px、414px、500、720(大部分4.7~5寸的安卓设备为720ox)

一般情况下，现在基本以750为准

 

unit值的计算

设置html字体为50px,

计算出1px所占的rem值，1 / 50 = 0.02；

这样元素的单位px就可以直接省略，使用*基本单位unit即可

 

技术方案1

动态设置html标签font-size大小

1.假设设计稿是750px

2.假设我们把整个屏幕划分为15等份（划分标准不一定，可以是20份也可以是10等份）

3.每一份作为html字体大小，这里就是50px

4.那么在320px设备的时候，字体大小为320/15 就是21.33px

5.用我们页面元素的大小除外不同的html字体大小会发现他们的比例还是相同的

6.比如我们以750为标准设计稿

7.一个1100*100像素的页面元素在750屏幕下，就是100/50 转换为rem 是2rem * 2rem 比例是1比1

8.320屏幕下，html字体大小为21.33，则2rem = 42.66px 此时宽和高都是42.66 但是宽和高的比例还是1比1

 

元素大小取值方法

1.最后的公式：页面元素的rem值 = 页面元素值（px）/  (屏幕宽度 / 划分的份数)

2.屏幕宽度/划分的份数 就是html font-size的大小

3.或者：页面元素的rem值 = 页面元素值（px）/ html font-size字体的大小

 

flex为1的元素被内部子元素撑开解决方案：

https://blog.csdn.net/qq_36157085/article/details/116519413?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

 

fastclick的引用

为什么使用fastclick:

在正常情况下，如果不进行特殊处理，苹果移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。

300ms延迟由来：

07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师做了一些约定解决此类问题。
这些约定当中，最为有名的是双击缩放（double tap to zoom）,这是产生300ms延迟的根源。
用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari
里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS
Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone
Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。 由此产生了300ms延迟问题。