标签：总结 scale 浏览器 布局 流式 像素 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.物理像素比
-
物理像素 就是我们说的分辨率 iPhone8的物理像素是 750
-
在 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。