移动端布局+案例

已于 2022-10-19 13:48:57 修改
阅读量535 收藏 14
点赞数 1
分类专栏： CSS学习 文章标签： 前端 css html
于 2022-10-19 13:35:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46563235/article/details/127364195
版权

1、移动端布局

模拟器上显示分辨率

css像素：CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。

物理分辨率：设备像素

设备像素比（dpr）=物理像素/css像素

布局像素：

（1）多用百分比

（2）弹性盒布局

（3）rem布局

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2、足球圈移动端布局案例

效果：

 

 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        ul{
            list-style: none;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 44px;
            background: #0cc420;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header div{
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            font-size: 12px;
            color: white;
        }
        header div:nth-child(1){
            border-radius: 12px 0 0 12px;
            background: #63d985;
           
        }
        header div:nth-child(2){
            border-radius: 0 12px 12px 0;
            background: #6dd006;
         
        }


        section{
            flex: 1;
            overflow: auto;
        }
        section ul{
            position: sticky;
            top: 0px;
            display: flex;
            background: white;
        }
        section ul li{
            flex: 1;
            text-align: center;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #d9d9d9;
            color: #8c8c8c;
            font-size: 14px;
        }
        section ul li:hover{
            border-bottom: 2px solid #08c63e;
            color: #08c63e;
        }
        section .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        section .list>div{
            width: 49%;
            margin-top: 4px;
            border: 1px solid grey;
        }
        section .list>div img{
            width: 100%;
          
        }
        section .list>div p{
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-indent: 10px;
        }

        

        footer{
            height: 44px;
            background: white;
            color: #d5d5d7;
            
        }
        footer ul{
            display: flex;
            height: 100%;
        }
        
        footer li{
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        footer li:hover{
            color: #08ca43;
        }
        footer li i{
            height: 21px;
            line-height: 21px;
            text-align: center;
            font-size: 16px;
        }
        footer li span{
            height: 17px;
            line-height: 17px;
            font-size: 12px;
            text-align: center;
        }
        footer li:nth-child(3){
            position: relative;
        }
        footer li:nth-child(3) i{
            width: 50px;
            height: 50px;
            border: 1px solid #dadada;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            top:-8px;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            background: white;
          
        }
    </style>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>

    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>
        <div class="list">
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
        </div>
    </section>

    <footer>
        <ul>
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>

            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>

            <li>
                <i class="iconfont icon-xiangji"></i>
            </li>

            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
            
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
        </ul>
    </footer>
</body>
</html>

 3、京东分类页案例

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        html,body{
            height: 100%;
        }
        ul{
            list-style: none;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 45px;
            background: green;
        }

        
        section{
            flex: 1;
            display: flex;
            overflow: auto;
        }
        section ul{
            width: 85px;
            overflow: auto;
        }
        section ul li{
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 16px;
            background: #f8f8f8;
            
        }
        section ul li:hover{
            background: white;
            color: red;
        }
        section>div{
            flex: 1;
            background: yellow;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            overflow: auto;
        }
        /* 让左边“热门推荐”一栏滚动条形状消失，其实滚动效果还在 */
        ::-webkit-scrollbar{
            display: none;
        }
        section .content>div{
            height: 101px;
            width: 33.33%;
            background:white;
            text-align: center;
           
        }
       section .content>div img{
           width: 60px;
           height: 50px;
            margin-top: 11px;
       }

        footer{
            height: 50px;
            background: red;
           
        }
    </style>
</head>
<body>
    <header>

    </header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
        </ul>
        <div class="content">
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="1.jpg" alt="">
                <p>电脑</p>
            </div>
           
        </div>
    </section>
    <footer>

    </footer>
</body>
</html>

4、移动端布局-横向滚动

效果：

  

代码：

css


        header{
            height: 45px;
            background: white;
        }
        header ul{
            display: flex;
            overflow: auto;
        }
        header ul li{
            /* flex-shrink */
            /*0 不挤压 */
            /* 1 挤压 */
            flex-shrink: 0;

            line-height: 45px;
            padding: 0 10px;
        }
        header ul li:hover{
            color: red;
        }

html

  <header>
        <ul>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
        </ul>
    </header>

你还要我怎样？
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
移动端开发案例-京东移动端首页
m0_37643322的博客
09-26 5325
1.移动端技术选型 方案：单独制作移动页面方案 布局：流式布局 2.搭建相关文件夹结构 其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片 3.设置视口标签以及引入初始化样式 4.整体html结构 5.分析页面布局 移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位
CSS———移动端案例分享（美图公司首页）
Bonsoir777的博客
08-06 482
本文主要介绍的是移动端的案例实现过程
前端小白移动端布局总结（含四大实战项目）及笔记
weixin_45817780的博客
03-30 1万+
前言 眼看着做两顿凉皮的功夫，2020第一季度就要过完了。 过去的三个月，好像经历了很多，又好像什么都没留下。 这种茫然的背后，是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示，疫情期间日均超3.5亿人次搜索、浏览教育相关的内容，同比上涨86%。 在这个人人都准备抓住机会弯道超车的时期，你准备学点什么？现在就冲！和博主一起学前端吧。 截至发表博文前的最新数据： 那么我们正式步入正题吧，...
html div flex,div+flex移动端布局
weixin_29305337的博客
06-16 936
移动端布局1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子2.弹性盒子flex3.div和flex的配合使用移动端页面1.移动端需要引入一个样式，meta 随便打开一个网站F12调成手机模式，复制meta2.弹性盒子一个div设置了display: flex; 就成了一个弹性盒子因此我们把移动端界面布局称为div+flex布局flex水平和垂直对齐方式Documentul {mar...
HTML移动端页面重构布局8大方法
热门推荐
免费网络加-速-器游戏加/速/器
07-27 4万+
1.固定布局     方法 &lt;head&gt;里把&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&gt;加好，然后根据设计稿设定相应的宽度即可，其他地方类似于pc端。     优点         思路沿用pc端，上手比较快  ...
前端-移动端布局-案例
03-20
本文将详细阐述移动端布局的基本概念、常见布局模式以及实际应用案例，帮助你更好地理解和掌握移动端前端开发的核心技术。 1. 基本概念： - 响应式设计：这是解决不同设备屏幕适配问题的关键，它允许网页根据用户...
携程网移动端flex布局案例
05-16
总结起来，"携程网移动端flex布局案例"涵盖了前端开发中的多项关键技术，包括Flex布局的运用，CSS3样式的深入，以及性能优化技巧如精灵图和渐变色。通过这些技术的组合，开发者能够创建出既美观又适应性强的移动网页...
【移动端网页布局】Flex 弹性布局案例 ③
03-06
在这个“移动端网页布局”案例中，我们可能看到一个包含多个子元素的容器，通过调整`flex-direction`实现横纵布局的切换，利用`justify-content`和`align-items`使子元素在容器内按需对齐。`flex-wrap`的使用则考虑...
移动端web开发flex布局案例
最新发布
04-07
本案例将深入探讨Flex布局的应用，以及如何利用它来优化移动端网页设计。 1. **Flex布局的基本概念** Flex布局允许容器对子元素进行灵活的调整，以适应不同大小的屏幕。它解决了传统布局（如浮动和定位）在处理...
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
这个"京东移动端首页案例-流式布局.zip"压缩包提供了一个实践性的示例，让我们深入理解如何构建适应不同屏幕尺寸的流式布局。流式布局是现代Web设计的核心，它允许网页内容在各种设备上自适应展示，无论是桌面、平板...
移动WEB开发之flex布局-携程网案例
qq_46199553的博客
09-09 561
1.1 传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 传统布局  兼容性好  布局繁琐  局限性，不能再移动端很好的布局 flex 弹性布局  操作方便，布局极为简单，移动端应用很广泛  PC 端浏览器支持情况较差  IE 11或更低版本，不支持或仅部分支持 2.1 布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器
HTML5综合实例--移动端页面
bangsuying5505的博客
09-23 473
学习要点 1.通过一个简单的移动手机页面， 复习学过的内容 2.手机网页的测试 3.手机布局的屏幕设定 　　手机网页的测试方法 　　　　1.直接在手机上测试，比较麻烦，效果好， 　　　　2.电脑上下载手机模拟器 　　　　3.利用浏览器自带的功能 　　name="viewport":屏幕设定 　　maximum-scale=1.0,minimum-scale=1.0;i...
H5移动端页面一些坑总结1
nanjwangc的专栏
11-16 1817
最近项目开始大量使用H5构建移动端页面，各路神机也开始填坑了。 1.flex盒模型 最新写法： display: flex;  酷派，三星等安卓手机需加上display: -webkit-box;兼容 否则，子元素中flex:1的无法撑开宽度 2.flex-wrap:wrap; 三星手机中，flex盒模型的子元素必须display:inline-block；如果是block，则三星手机
移动端页面布局
小王的博客
07-29 2798
流式布局、弹性盒布局、媒体查询、Rem布局、Sass
移动端布局攻略
huaerxiangwoxiao的博客
12-27 372
除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用
关于移动端布局和pc端写法
xgb的博客
05-25 9044
一：移动端准备工作&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"&gt;&lt;!-
移动端html基本模版
快乐小编的专栏
02-20 5104
HTML> lang="en"> charset="utf-8"> 移动端图片轮播 Your browser does not support JavaScript! name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, use
关于移动端适配的几个方法，快速构建响应式网站必备知识
wushaoxion的博客
09-26 8127
随着移动端的发展，手机端的页面应用越来越广泛，所以我们现在更多的是做移动端的页面。 但是我们同样要维持pc端，因此难免会遇到许多麻烦。 而且现在做移动端适配的方法也有好多种，针对不同的网站我们需要合理的判断，选择全适的方法； 第一种方法：整个页面宽高用px写死，让宽度自适应 这是最蠢的一个办法，但是实际上我们用得也挺多，它适用于一些页面结构比较复杂的网站。 我们只需要在头
移动端开发案例（Bootstrap布局，响应式开发）
Mia的博客
02-16 2197
注意事项： 1.屏幕缩放发现中屏幕和大屏幕布局是一致的，因此我们列定义为col-md- 就可以了，md是大于等于970px以上的。 2.先布局PC端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊布局样式。 3.Bootstrap 的字体图标，默认加一个before，所以要设置字体图标样式，要用before设置 4.图片默认与文字的基线对齐，所以用 vertical-align:middle...
移动端flex布局案例
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动设备上水平居中显示。以下是一个使用Flex布局实现此效果的示例代码： HTML代码： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值