2. 技术博客
  3. 移动端布局——流式布局(百分比布局)

移动端布局——流式布局(百分比布局)

tech2022-07-16  163

流式布局(百分比布局)

视口

浏览器显示页面的屏幕区域 分为三种

布局视口视觉视口理想视口(重点) 总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

视口meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum=scale=1.0,minimum-scale=1.0.user-scalable=no"> 属性描述width宽度设置viewport可以设置device-width特殊值inital-scale初始化缩放比大于0的数值minimum-scale最小缩放比maximum-scale最大缩放比user-scalable用户是否可以缩放yes或者no

最标准的viewport设置

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

物理像素&物理像素比

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

二倍图

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

<style> /* 我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊 */ /* 我们采取的是 放一个 100* 100 图片 然后手动的把这个图片 缩小为 50* 50 （css像素） */ /* 我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是 2倍图 */ img:nth-child(2) { width: 50px; height: 50px; } </style> </head> <body> <!-- 模糊的 --> <img src="images/apple50.jpg" alt=""> <!-- 我们采取2倍图 --> <img src="images/apple100.jpg" alt=""> </body>

背景缩放 background-size

规定背景的尺寸大小 单位：px/%/cover/contain

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（等比例拉伸，完全覆盖，会有一边超出）contain把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域。（等比例拉伸，任意一边先与盒子重合即可）

移动端特殊样式

/*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; }

移动端常见布局

移动端单独制作 流式布局（百分比布局）flex 弹性布局（强烈推荐）less+rem+媒体查询布局混合布局 响应式 媒体查询bootstarp 流式布局：

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

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

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

<style> * { margin: 0; padding: 0; } section { width: 100%; max-width: 980px; min-width: 320px; margin: 0 auto; } section div { float: left; width: 50%; height: 400px; } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color: purple; } </style> </head> <body> <section> <div></div> <div></div> </section> </body>
最新回复(0)