开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

写在前面的话：本文主要讲解关于移动端开发的一些小tips吧~~

关于vsCode的使用

  <!-- ctrl + d  -->
  <!-- ctrl + shift + 箭头上下 -->
  <!-- ctrl + 回车  光标所在行加 下光标 -->
  <!-- ctrl + shift +  回车  光标所在行加 上光标 -->

移动端的调试工具 谷歌浏览器

常见屏幕知识

1. 一般口中所说的屏幕尺寸 包括笔记本 和平板 手机 都是指屏幕对角线的长度

2. 逻辑分辨率 屏幕的宽度 和高度 但是 单位 px

3. 设备分辨率 屏幕里面一共拥有的 物理像素点个数

   1. 物理像素点 屏幕里面显示 图像的最小的单位
   2. 由硬件决定

4. 手机屏幕大小一样的情况下，谁的物理像素点越多，谁的屏幕就越清晰(iphon4屏幕比3要清晰)

关于失真

1. 市场上的手机全部都是 高清晰度的手机 2 倍 3倍
2. 主流做法 美工 只做一张高清的图片 2倍或者3倍
3. 写代码的时候 直接使用这一张图片就可以，不需要再去处理不同屏幕不同的图片

视口

1. 移动端的屏幕的区别 和 pc端的屏幕的区别 只是屏幕大小不一样而已
2. px 单位 绝对长度单位 大小是固定 不应该被屏幕的宽度改变所影响

只要开发移动web 必须要加上以下代码

理想视口 普通的写法

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

标准的写法

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

普通的理想视口的写法 容易出现一些莫名其妙的问题 兼容性不好

大的项目 都建议使用 标准的理想视口的写法 。