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

最新推荐文章于 2025-05-12 10:32:08 发布

Wyyyy1024

最新推荐文章于 2025-05-12 10:32:08 发布

阅读量598

点赞数 2

分类专栏：前端移动与开发

本文链接：https://blog.youkuaiyun.com/weixin_44389562/article/details/108369010

版权

前端移动与开发专栏收录该内容

22 篇文章

订阅专栏

流式布局(百分比布局)

视口

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

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

视口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>