移动端基础

移动段基础

视口

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

布局视口layout viewport

1. 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
2. iOS, Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口visual viewport

1. 字面意思，它是用户正在看到的网站的区域
2. 注意∶是网站的区域。
   我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视竺尺寸
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的︰布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta视口标签

标准的viewport

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

二倍图

1物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• PC端和早前的手机屏幕/普通手机屏幕: 1CSS像素=1物理像素的
• Retina(视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

多倍图

• 对于一张50px*50px的图片,在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模湖
• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
• 通常使用二倍图，因为iPhone 6\7\8的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
• 背景图片注意缩放问题

/在iphone8 下面*/
img {
    /*原始图片100*100px*/
    width: 50px;
    height : 50px;
}
.box{
    /*原始图片100*100px*/
    background-size: 50px 50px;
}

3.3背景缩放background-size

1. background-size属性规定背景图像的尺寸

2. 语法

    background-size:背景图片宽度 背景图片高度;
   

3. 属性

   1. 单位:长度|百分比| cover | contain;
   2. cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
   3. contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

移动端主流方案

1.单独制作移动端页面

2.响应式页面兼容pc移动端

内容区域

移动端主流方案

1.单独制作移动端页面

2.响应式页面兼容pc移动端