移动端网页基础

我会带着你远行 2021-09-07 06:12 451阅读 0赞

### 移动端 ###

*  一、移动端背景
 *   *  1.浏览器
     *  2.手机屏幕
 *  二、视口
 *   *  1.布局视口layout viewport
     *  2.视觉视口
     *  3.理想视口
     *  4.meta标签
 *  三、物理像素和物理像素比
 *   *  1.物理像素：分辨率
     *  2.css的px
     *  3.视网膜屏
     *  4.倍图
     *  5.背景图片属性
 *  四、开发选择
 *  五、移动端特殊样式解决
 *  六、移动端常见布局
 *  七、移动端触屏事件
 *  八、事件对象属性
 *   *  1.event.touches
     *  2.event.targetTouches
     *  3.event.changedTouches
 *  九、移动端尺寸自适应插件

# 一、移动端背景 #

## 1.浏览器 ##

主流浏览器是webkit内核，UC和QQ，百度都是根据webkit内涵修改过来的内核，国内尚无自主研发的内核。  
就像国内手机操作系统都是基于安卓修改开发的一样

## 2.手机屏幕 ##

不关心分辨率，常用px,不需要过度关心单位，

# 二、视口 #

视口（viewport）就是浏览器显示页面内容的屏幕区域，视口分为布局视口、视觉视口和理想视口

## 1.布局视口layout viewport ##

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。  
布局视口即网页整体缩小，全部显示在手机上。

## 2.视觉视口 ##

即用户能看到的网页区域。  
可以缩放去操作视觉视口。  
.视觉视口即网页不变，手机显示局部，可以滑动显示各个部分

## 3.理想视口 ##

理想的视口是完整的网页，合适的大小。  
需要手动填写meta视口标签通知浏览器操作。  
乔布斯发明的创意。

## 4.meta标签 ##

主要作用是：布局视口的宽度，即网页的宽度应该和设备的宽度保持一致。而不是采取默认的980px宽度。

1.写法

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>解释说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>宽度设置的是viewport宽度，可以设置device-width特殊值</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>初始缩放比，大于0的数字</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>最大缩放比，大于0的数字</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>最小缩放比，大于0的数字</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>用户是否可以缩放，yes或no（1或0）</td> 
  </tr> 
 </tbody> 
</table>

# 三、物理像素和物理像素比 #

## 1.物理像素：分辨率 ##

就是手机的实际分辨率 ，不是手机屏幕尺寸，不要搞混。  
758\*1340分辨率  
表示一行的像素点是758个  
一列的像素点是1340个

## 2.css的px ##

手机端1px不一定等于1物理像素  
iphone8上，1px等于2个物理像素，  
即iphone8的分辨率是**750\*1334**  
那么**375px\*667px**大小的盒子就能完全覆盖住手机屏幕了。  
即1px能显示两个物理像素  
这个就是物理像素比或屏幕像素比（dpr）  
手机分辨率单位 = px \* dpr  
即标签的大小会乘上dpr才是手机上分辨率的大小

在pc端1px是等于1物理像素的

## 3.视网膜屏 ##

Retina(视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，  
从而达到更高的分辨率，并提高屏幕显示的细腻程度。

## 4.倍图 ##

比如50*50px的图片，放到2dpr的手机上，就会当大2倍，会失真  
所以需要准备一个100*100px的图片，先手动缩小2倍，然后放大就不会模糊了。  
即我们准备的图片要比实际需要的大2倍，这就是倍图。  
手动缩小

img{ 
      width:50px;
      height:50px
      //这样就能手动缩小100*100的图了
    }

背景图片也需要手动缩放

backgtound-size:50px 50px;

所以注意在视网膜屏下的开发。

## 5.背景图片属性 ##

backgtound-size:宽度;
    //只写一个数代表宽度，高度会等比例缩放
    backgtound-size:宽度 高度;
    //值可以是百分百，根据父盒子的大小计算
    //值为cover：图片会完全覆盖盒子，图片有可能显示不全，图片是等比例拉伸。
    //值为contain:图片会先满足接触到的一边，然后停止放大。图片会完全显示，但可能不会完全覆盖住盒子。图片是等比例拉伸。

# 四、开发选择 #

1.PC端和浏览器端分开制作  
2.PC端和移动端混合开发，响应式制作  
3.css初始化推荐使用normalize.css

# 五、移动端特殊样式解决 #

/*CSS3盒子模型，移动端无兼容性，PC端有兼容性*/
    box-sizing: border-box;
    
    -webkit-box-sizing: border-box;
    
    /*点击高亮我们需要清除清除 设置为transparent 完成透明 这样点击a链接就没有高亮效果了 */
    -webkit-tap-highlight-color: transparent;
    
    /*在移动端浏览器默认的外观在iOS上 加上这个属性才能给按钮和输入框自定义样式 */
    -webkit-appearance: none;
    
    /*禁用长按页面时的弹出菜单*/
    img,a {  -webkit-touch-callout: none; }

# 六、移动端常见布局 #

链接: [移动端常见布局][Link 1].

# 七、移动端触屏事件 #

touchstart 手指触摸到一个DOM元素时触发  
touchmove 手指在一个dom元素上滑动时触发  
touchend 手指在一个DOM元素上移开时触发

# 八、事件对象属性 #

移动端也有事件对象

## 1.event.touches ##

表示几个手指

## 2.event.targetTouches ##

正则触摸当前DOM元素上的手指的个数

## 3.event.changedTouches ##

手指状态发生了改变的列表  
从无到有，  
从有到无。