2. 科技
    3. 移动页面布局

    移动页面布局

    科技2022-07-16  109

    浏览器分为2种：

    一种是pc端浏览器（谷歌，火狐，IE，欧朋，其他）一种是m端浏览器 移动端浏览器只需要做 -webkit-兼容就行. pc端页面需要兼容各个浏览器，移动端页面需要兼容各个手机尺寸

    什么是视口

    viewport ： 视口，视口就是浏览器显示内容的区域。

    视口的分类：

    PC 端：

    视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。 移动端分为三个视口：布局视口、视觉视口和理想视口。（理想视口是我们布局常用的视口）

    理想视口的设置

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

    属性值定义widthdevice-width定义视口的宽度等于设备的宽度initial-scale[0-1]定义初始缩放值minimum-scale[0-1]定义放大最大比例maximum-scale[0-1]定义缩小最小比例user-scalableyes / no定义是否允许用户手动缩放页面，默认值 yes

    设置理想是口

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <body> 大华教育 </body> </html>

    有几点值得注意：

    viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放

    倍图：

    一倍图、二倍图、三倍图是移动端处理页面图片的一种图片大小格式。二倍图和三倍图的命名写法 @2x.png / @3x.png 。移动端布局使用二倍图或者三倍图的图片的目的是为了避免图片的失真。

    分辨率

    屏幕分辨率 == 物理像素 1920*968 解释为：pc端浏览器上可以横着排列1920个像素点，竖着排列968个像素点。 pc端，1px == 1个像素。但是移动端他们就不相等。 移动端 1px == 2个像素

    布局方式

    百分比布局 弹性盒子布局 媒体查询布局（适配多个终端的） bootstarp框架

    单位 rem less 媒体查询

    Processed: 0.009, SQL: 10