【移动Web开发 | 移动端常见布局】流式布局

最新推荐文章于 2024-03-04 09:06:44 发布
最新推荐文章于 2024-03-04 09:06:44 发布
阅读量401 收藏 3
点赞数
分类专栏： 移动与web前端开发 文章标签： css3 css html5 vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43490212/article/details/109776600
版权

流式布局（百分比布局）

一：基本概念

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • 流式布局方式是移动web开发使用的比较常见的布局方式。
  • max-width 最大宽度 （max-height 最大高度）
  • min-width 最小宽度 （min-height 最小高度）
    图2

关于宽度的百分比计算

  1. 标准流的盒子宽度百分比是参考离其最近的行内块，块级标签的宽度
  2. 固定定位的盒子得宽度百分比是参考浏览器窗口来计算的
  3. 绝对定位的盒子的宽度百分比参考离其最近的有定位的上层标签的宽度

二：案例

京东模仿，其中用到了流式布局

css部分代码

*{
    margin: 0;
    padding: 0;
}

body{
    height: 20000px;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: auto;
    font-size: 14px;
    font-family: -apple-stystem,Helvetica,sans-serif;
    color: black;
    line-height: 1.5;
    background-color: #DEE1E6;
}

/* 清除图片空隙 */
img{
    vertical-align: top;
}

/* 顶部模块 */
.app{
    height: 45px;
}

.app ul li{
    float: left;
    height: 45px;
    list-style: none;
    line-height: 45px;
    text-align: center;
    background-color: #333333;
    color: #fff;
}

.app ul li:nth-child(1){
    width: 8%;  
}

.app ul li:nth-child(1) img{
    width: 10px;
    vertical-align: middle;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3){
    width: 57%;

}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #F63515;
}


/* 搜索模块 */
.search-wrap{
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    position: fixed;
    overflow: hidden;
    /* position: relative; */
    height: 44px;
    /* background-color: brown; */
}

.search-btn{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
    margin: 14px 0 0 15px;
    background: url(../images/s-btn.png) no-repeat;
    background-size:20px 18px ;
}

.search{
    position: relative;
    margin: 7px 50px;
    height: 30px;
    background-color: #fff;
    border-radius: 15px;
}

.search .jd-icon{
    position: absolute;
    top: 8px;
    left: 15px;
    width: 40px;
    height: 30px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}

.search .jd-icon::after{
    position: absolute;
    top: -3px;
    right: 9px;
    content: "|";
    color: #DDDDDD;


}

.search-login{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    color: white;
}

.sou{
    position: absolute;
    top: 9px;
    left: 53px;
    width: 18px;
    height: 18px;
    background: url(../images/jd-sprites.png) no-repeat -82px 0;
    background-size: 200px 200px;
}


/* 主体内容模块 */
.slider img{
    width: 100%;
}

/* 蔡康永模块 */
.brand{
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.brand div{
    float: left;
    width: 33.33%;
}

.brand div img{
    width: 100%;
}


/* 导航模块 */
.nav a{
    float: left;
    width: 20%; 
    text-align: center;
    text-decoration: none;
    color: black; 
    font-size: 12px;
}

.nav a img {
    width: 50%;
    margin: 0 auto;
}

.nav a p{
margin-bottom: 5px;
}

HTML部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 移动布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>假冒京东</title>
    <!-- 引入css初始化样式 -->
    <link rel="stylesheet" href="./css/clear.css">
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 顶部模块 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>
                打开京东APP，购物更轻松
            </li>
            <li>
                立即打开
            </li>
        </ul>
    </header>

    <!-- 搜索模块 -->
    <div class="search-wrap">
        <div class="search-btn">

        </div>

        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>

        </div>

        <div class="search-login">
            登录
        </div>
    </div>

    <!-- 主体内容模块 -->
    <div class="maincontent">
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>

    </div>


    <!-- 蔡康永模块 -->
    <div class="brand">
        <div class="pic1">
            <a href="http://baidu.com"><img src="upload/pic1.dpg" alt=""></a>
        </div>
        <div class="pic2">
            <a href="#"><img src="upload/pic2.dpg" alt=""></a>
        </div>
        <div class="pic3">
            <a href="#"></a><img src="upload/pic3.dpg" alt=""></a>
        </div>

    </div>

    <!-- 导航模块 -->
    <div class="nav">
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <p>京东超市</p>
        </a>
    </div>

</body>

</html>
  • 运行截图
    图1【叽叽歪歪】搜索框那块用到了固定定位，以后学了js会改成随着底下的内容移动到顶部，然后固定在顶部（听起来像粘性定位吧，但因为兼容性问题，所以用固定定位）
-4444x-
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动web开发实例flex布局案例源码
02-16
移动web开发实例flex布局案例源码
uniapp瀑布流布局写法
A12536365214的博客
09-19 1674
属性为 "widthFix" 时，图片的宽度将会被拉伸或缩小以适应容器的宽度，同时保持图片的原始宽高比例。瀑布流布局（Waterfall Flow Layout），也称为瀑布流式布局，是一种常见的网页或移动应用布局方式，特点是元素以不规则的方式排列，就像瀑布中的流水一样，每个元素的高度可以不同。不规则的排列：瀑布流布局允许元素以不同的高度和宽度排列，因此适用于展示不同尺寸和形状的内容，如图片、卡片、商品等。动态加载：可以通过滚动加载或异步加载来动态添加新的元素，以实现无限滚动效果，提高用户体验。
移动WEB开发之流式布局--移动端常见布局--流式布局
薛定谔的猫
11-21 822
京东自主研发推出DPG图片压缩技术，经测试 该技术，可直接节省用户近50%的浏览流量， 极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼 容支持，经过内部和外部上万张图片的人眼浏 览测试后发现，压缩后的图片和webp的清晰度 对比没有差距。不占标准文档流 中间的搜索宽度就跟父元素一样，此时我们设置它的外边距，这样它就会随浏览器的大小变化而变化。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局，就是百分比布局，也称非固定像素布局。
CSS3单独制作移动端页面布局方式(流式布局、flex弹性布局)
最新发布
Bulut0907
03-04 999
布局极为简单，移动端应用很广泛PC端浏览器支持情况较差，特别是IE 11或更低版本，不支持或仅部分支持为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效采用Flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目。项目可以设置宽和高。
移动布局——流式布局
m0_52197531的博客
02-11 9224
流式布局 文章目录流式布局1.1 什么是流式布局1.2 固定布局和流式布局比较1.3流式布局的缺点2.1弹性布局2.1.1 弹性盒子属性——父容器属性1.flx-direction属性2.flex-wrap属性3.flex-flow属性4.align-items属性5.justify-content属性2.1.2 弹性盒子属性——子容器属性1.order属性2.flex-grow属性3.flex-shrink属性4.flex-basis属性 1.1 什么是流式布局 ​ 在PC端进行网页制作时，
vue+uniapp瀑布流布局多种实现方式
pixle的博客
01-08 9461
瀑布流布局是网页设计常见的一种布局，一般用于图片多列展示。列宽固定，图片根据自身高度自适应交错排列。
【uniapp前端组件】流式布局，适用搜索记录、标签等场景
只会瞎搞
08-22 717
属性名类型默认值必填说明Object空是flowListArray空是流式布局展示的数据数组。包含两种数据类型：1、String类型数组。2、Obj类型数组。String空否流式布局Item展示数据的参数名。1、当flowList为String类型时，可不填或’'。2、当flowList为Obj类型时，必填，值为Obj展示到流式布局的属性名。String#868686否流式布局Item背景色。String#ffffff否流式布局Item字体颜色。String13否流式布局。
移动页面web布局实践.zip_html5_弹性布局_移动端 web开发_移动端web
09-24
移动端页面开发，web弹性布局实践，很多好的实例可以学习。
Web移动端布局那些事
01-19
最近做了一个针对微信移动端的项目，在开发中遇到了不少的坑，学到了也不少，发现有许多地方值得写一下，以供做web移动端同学参考参考。 一、单位 说到移动端，不得不提适配问题，大大小小的移动设备不但让做android...
移动web开发-rem布局案例源码，html+css素材
02-16
移动web开发-rem布局案例源码，html+css素材
简要了解jQuery移动web开发的响应式布局设计
11-24
这意味着，无论用户是在移动、平板还是桌面设备上浏览 Web 页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现...
uni-app 瀑布流布局的实现
UserGuan的博客
10-16 4101
获取每一列的高度，每次图片加载时，把该图片加载到列高度最短的那一列进行实现。注意：这个是通过图片初始化实现的，所以服务器端的数据必须含有图片。
uni-app 跨平台商城界面设计实战 uni app在线视频教程
05-06
主要讲解移动商城首页、商城分类、商城购物车、产品分类、产品列表、评论、地址管理、下单、会员注册、会员登录、密码修改、订单列表、收藏、信息列表和详情等...
手机移动端技术选型之流式布局
微木
11-07 226
以京东移动端首页页面，讲解流式布局
移动开发-流式布局
一位自学前端开发学者
02-23 91
Normalize.css：保护了有价值的默认值、修复了浏览器的bug、是模块化的 、拥有详细的文档。meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致，就是设备有多宽，布局视口就多宽。一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素=1物理像素。理想视口，对设备来讲，是最理想的视口尺寸，需要手动添写meta视口标签通知浏览器操作。视口是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口。它是用户正在看到的网站的区域，可通过缩放去操作视觉视口。
uni-app 首页瀑布流布局
麋鹿的鹿
12-27 880
<view class="pubuBox"> <view class="pubuItem"> <view class="item-masonry" v-for="(item, index) in hotSalesList" :key="index" @tap="clickRight(item)"> <view class="positions"> <image :src="ite
uniapp 瀑布流布局
织网的博客
04-15 4528
瀑布流组件 <template> <view class="waterfall-layout" :style="{ margin: columnGap + 'px' }"> <view class="water-flow-column" :style="{ 'margin-right': columnGap + 'px' }" v-for="(col, c) in colunmList" :key="c"> <view class="item" :id=
移动端常见布局总结（一）——流式布局（百分比布局）
micoria的博客
02-23 1065
流式布局 流式布局，也就是百分比布局。 它实际通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不收固定像素的限制，内容向两侧填充。 要使宽度在合理范围内进行伸缩，故有以下两个属性进行操作 max-width：最大宽度，（max-hight）一般为 640px 和 750px min-width：最小宽度，（min-hight）一般为 320px 和 350px 案例：京东移动端首页 1.1 准备工作 建立相关文件 设置视口标签以及引入初始化样式 <meta name="viewpo
熟练掌握移动端开发布局怎么具体说说
07-17
移动端开发布局主要涉及到移动设备屏幕的适配和布局排版，以下是一些具体的技巧和方法： 1. 使用响应式布局：响应式布局是一种能够根据设备屏幕大小和分辨率自动调整布局的技术。可以使用CSS媒体查询来设置不同屏幕...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值