【前端】移动端布局

最新推荐文章于 2024-05-13 00:02:56 发布

李斯啦果

最新推荐文章于 2024-05-13 00:02:56 发布

阅读量1.2k

点赞数 17

分类专栏：前端文章标签：前端 html css 开发语言

本文链接：https://blog.csdn.net/m0_64538862/article/details/136598124

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.移动端特点

PC端网页和移动端网页的不同

PC端网页：屏幕大，网页固定版心 jd.com
移动端网页：屏幕小没有版心网页宽度多数为100% mjd.com

同一个产品的PC端网页和移动端网页是两个不同的网站

如何在PC端模拟移动网页的效果？

谷歌模拟器

分辨率

屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量

PC分辨率：如1920*1080 1366*768 ... ...

缩放150%：

实际分辨率：(1920/150%)*(1080/150%)

硬件分辨率：出厂设置，

缩放调节的分辨率：软件设置

分辨率分类：

物理分辨率：生产屏幕时就固定的，不可以被改变

逻辑分辨率：由软件（驱动）决定的

默认情况下，网页的宽度和逻辑分辨率相同吗？

默认情况下网页宽度都是980px，使用meta标签设置视口宽度，制作适配不同设备宽度的网页

视口标签：

目的：网页宽度和设备宽度（分辨率）相同

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

自动生成的代码框架中包含视口标签

二倍图

二倍图：750px的图高分辨率下图片不会模糊失真网站居多

二倍图正确的测量方法：

像素大厨：测量出来width 750px

开发模式下设计图2x width 375px

不能在二倍图模式下测量设计稿

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>京东</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .toolbar {
            /* 固定定位 */
            position: fixed;
            left: 0;
            bottom: 0;
            /* 百分比布局  流式布局 */
            /* 宽度自适应 高度固定 */
            width: 100%;
            height: 50px;
            background-color: pink;
            border-top: 1px solid #ccc;
        }
        
        .toolbar li img {
            height: 100%;
        }

        .toolbar li {
            float: left;
            /* 流式布局 */
            width: 20%;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="toolbar">
        <ul>
            <li>
                <a href="#"><img src="./images/index.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/classify.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/jd.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/car.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/login.png" alt=""></a>
            </li>
        </ul>
    </div>
</body>

</html>

3.flex布局

浮动布局：存在脱标问题

flex布局/弹性布局

是一种浏览器提倡的布局模型
布局网页更简单，灵活
避免了浮动脱标问题

flex布局不兼容IE低版本浏览器

网站caniuse..com可以查看兼容性

3.1flex布局模型

作用：

基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
flex布局非常适合结构化布局

设置方式：

父元素添加display:flex，子元素可以自动的挤压或拉伸

组成部分：

弹性容器：父元素
弹性盒子：子元素
主轴
侧轴/交叉轴

3.2主轴对齐方式

在flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的距离

修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

3.3 侧轴对齐方式

align-items：添加到弹性容器

align-self：控制某个弹性盒子在侧轴的对齐方式，添加到弹性盒子

属性值	作用
flex-start	默认值，从起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿主轴线被拉伸至铺满容器