【移动开发】流式布局详细讲解-1

最新推荐文章于 2024-03-19 20:32:00 发布

宝爷~

最新推荐文章于 2024-03-19 20:32:00 发布

阅读量232

点赞数

分类专栏： Web JavaScript 文章标签： html css 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/yubao0723/article/details/128607466

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Web

1 篇文章 0 订阅

订阅专栏

流式布局是一种使页面元素宽度按屏幕分辨率自动适配的布局方式，常用于移动端以实现不同设备的满屏显示。通过设置meta标签的视口属性和将元素宽度设为100%，可以实现流式布局。此外，流式布局也适用于导航项等分和处理固定与自适应宽度的布局场景。然而，当屏幕尺度变化过大时，流式布局可能导致元素高度和文字大小不协调，此时需要响应式布局和弹性布局来补充解决。

摘要由CSDN通过智能技术生成

一、什么是流式布局?

网页布局中包括静态布局、流式布局、响应式布局和弹性布局。

静态布局:指的就是网页中的所有元素都使用px为单位.不管浏览器具体的大小是多少,始终按照设置的值布局来显示。

流式布局:是页面中元素的宽度按照屏幕分辨率自动进行适配调整,也就是我们常说的适配,它可以保证当前屏幕分辨率发生改变的时候,页面中的元素大小也可以跟着改变,所以流式布局是移动端开发常用的一种布局。

其他布局方式后面再做总结.

二、什么情况下会用到流式布局?

1. 打开我们移动端页面的时候,发现不管在哪种移动设备中,页面始终都是满屏显示如下所示:

下图是京东页面在iphone12 pro中的效果:

下图是京东页面在iphone SE中的效果:

在移动开发中这种情况下就要用到流式布局实现了,具体的实现如下:

首先在网页的head标签中添加meta标签设置视口

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流式布局</title>
  <style type="text/css">
      <!-- width: 100% 就可以实现让当前元索在不同移动设备中沾满整个屏幕-->
    .viewport{
        width:100%;
    }
  </style>
 </head>

然后将页面中的父元素宽度设为100%既就可以实现

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流式布局</title>
  <style type="text/css">
      <!-- width: 100% 就可以实现让当前元索在不同移动设备中沾满整个屏幕-->
    .viewport{
        width:100%;
    }
  </style>
 </head>
 <body>
 <div class="viewport"></div>
 </body>
</html>

2. 移动端中导航项要等分父容器,以5等分为例,具体代码如下:

可能有的小伙伴还想到了如果分为其他等分呢?我们的做法都是100% 除以对应的份数就可以了.假如要分为3等份,就100除以3.假如要分为4等份就100除以4即可.

3. 在网页布局中如果出现左右两侧固定大小,中间自适应(圣杯布局,双飞翼布局)这种经度的布局也需要用到流式布局实现,如下:

具体实现方式如下: HTML结构中先准备3个盒子

<body>
    <div class="viewport">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

然后设置对应的CSS代码:

<style type="text/css">
      .viewport {
        padding: 0 200px;
        position: relative;
    }
    /*左侧固定大小200px */
    .left {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }
    /*中间自适应 */
    .middle {
        width: 100%;
    }
    /*右侧固定大小200px */
    .right {
        width: 200px;
        height: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }
  </style>

流式布局还有其他的情况,例如左侧固定大小,右侧自适应。右侧固定大小左侧自适应剩下这两种情况大家可以参照上面的圣杯布局的方式灵活的实现,这里就不给大家演示了.

三、流式布局有没有缺点不足的地方么?

流式布局是用于解决类似的设备不同分辨率之间的兼容,如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。所以后面还会给大家分享通过响应式布局和弹性布局来解决这类问题。