移动端布局基础（html+css+js）

1、视口

1、布局视口

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

PC端网页直接应用于移动端就只能展现一部分内容

2、视觉视口

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

3、理想视口

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

4、meta视口标签

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

 2、二倍图

1、物理像素和物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

2、二倍图

A：image图片尺寸的改变

1. 我们需要一个50*50像素（css像素）的图片，直接放到我们的iphone8里面会放大2倍成100*100就会模糊
2. 我们采取的是放一个100* 100图片︰然后手动的把这个图片缩小为 50* 50 （css像素)

利用css特性等高等宽缩小为50*50

1. 我们准备的图片比我们实际需要的大小大2倍，这就方式就是2倍图（准备后需要提前缩小）
2. 总结：通过准备一张大两倍的图去等宽缩小然后在移动端展现就会自动放大且不会变模糊

B：背景图片的伸缩

             /* 1、cover:把背景图扩展到足够大，以使其背景图像完全覆盖背景区域 */

            /* background-size: cover; */

            /* 2、contain:把图像扩展至最大尺寸，以使其高度和宽度完全适应内容区域 */

            /* background-size: contain; */

            /* 3、对于只输入一个数值的情况  我们默认给宽度和高度赋同一个值*/

            /* background-size: 300px; */

            /* 4、对于输入两个值我们给设定不同的数值 */

            /* background-size: 500px 500px; */

3、移动端开发选择

1、单独制作移动端页面

通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动埃页面。
 

2、响应式页面 兼容移动端

缺点：制作繁琐，需要考虑兼容性问题，其通过判断屏幕宽带改变样式，以适应不同终端。

4、移动端技术解决方案：

A:盒子属性的改变

1、传统盒子大小宽度/高度为200px：width200px+padding(20px)+margin(20px)=240px；

2、css3盒子大小宽度/高度为200px：width200px+padding(20px)+margin(20px)=200px；

要实现第二点特性需要使用：box-sizing:border-box;盒子多增添部分往内部压缩padding和margin不会在撑大盒子，而第一点默认属性是box-sizing=sontent-box;

解决移动端兼容性我们采取：-webkit-box-sizing:border-box;

B：移动端超链接属性的改变

分析：在移动端超链接点击后会出现点击的瞬间出现常亮效果，我们可以采取利用-webkit-tap-highlight-color:transparent;属性去除高亮；

C:移动端按钮输入框样式自定义

利用：-webkit-appearance:none;

D:禁止长按页面时弹出的菜单

利用：image,a{-webkit-touch-callout:none;}