3.21知识总结（移动端基础+流式布局）

1.移动端基础

1 .1浏览器现状

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

** 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。**

1.2 手机屏幕的现状

• 移动端设备屏幕尺寸非常多，碎片化严重。

• Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

2.meta视口标签

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

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

meta视口标签的作用： 使用viewportmeta标签可以很方便地在不同屏幕尺寸的手机上对内容布局和显示的控制，通常针对移动网页设计的页面。

initial-scale

初始缩放比例

maximum-scale

允许用户缩放到的最大比例

minimum-scale

允许用户缩放到的最小比例

user-scale

1为允许用户手动缩放，0反之

3.物理像素比

1. 物理像素 就是我们说的分辨率 iPhone8的物理像素是 750

2. 在 iPhone8里面 1px 开发像素 = 2个物理像素

4.二倍图的做法

1.先将精灵图整体缩小为原来大小的一半

2.然后再去测量他的位置和大小

3.然后需要将background-size改为精灵图的大小的一半。

5.移动端特殊样式

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

6.流式布局

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

标签：总结,scale,浏览器,布局,流式,像素,3.21,视口,移动
来源： https://blog.csdn.net/m0_64492064/article/details/123647431