3.移动端特点,百分比布局,Flex布局,圣杯布局

最新推荐文章于 2024-07-31 11:41:46 发布

一颗胖头橙子

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量302

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_72430529/article/details/125899750

版权

1.移动端特点

PC端与移动端的不同

PC端的屏幕大,制作页面时需要设置页面的版心

PC端浏览器种类繁多,要考虑更多的兼容性问题 (布局:浮动+定位+标椎流)

移动端的屏幕小,制作时将宽度设大多为100%

移动端基本上不需要考虑兼容性问题,放心大胆使用CSS新特性

(制作移动端页面可以通过谷歌手机模拟器进行调试)

物理分辨率与逻辑分辨率

物理分辨率也就是硬件分辨率,是电脑厂商设置的,默认的电脑分辨率,是不可以修改的

例如:1920 * 1080 1366 * 768 .......

分辨率越高越清晰

逻辑分辨率是软件可以达到的，我们开发中写的是逻辑分辨率

pc端的物理分辨率与逻辑分辨率是相等的

但是移动端的物理分辨率与逻辑分辨率不完全相同

二倍图

我们写代码是按照逻辑分辨率来写的,以iPhone6/7/8为例,如果IU设计一个375*667的设计稿给我们开发,但是页面放在iPhone6/7/8手机屏幕上显示是750*1334的分辨率,这样就会使得我们的页面失真,所以一般设计师会给我们一个750像素的图,当我们开发时就把设计稿放进像素大厨里将设计稿除以二,给它缩小一倍就可以了.

视口

视口:浏览器显示页面内容的屏幕区域

布局视口

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口

用户正在看到的网站的区域。

理想视口

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

简单理解： 设备有多宽，我的网页就显示有多宽

视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,
 maximum-scale=1.0, user-scalable=0">

width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

2.百分比布局

百分比布局，也叫流式布局

效果：宽度自适应，高度固定。

3.flex布局(弹性布局)

Flex布局/弹性布局：

是一种浏览器提倡的布局模型

布局网页更简单、灵活

避免浮动脱标的问题

作用:

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex布局非常适合结构化布局

设置方式:

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

组成部分:

弹性容器

弹性盒子

主轴

侧轴 / 交叉轴

主轴对齐方式

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

justify: 每行排齐方式

重点记忆justify-content: space-between; 和center

justify-content: space-between;

显示效果两面没有间隙,中间自适应平均分

justify-content: space-around;

效果是中间部分间隙是两边的间隙的两倍

justify-content: space-evenly;

效果是所有的间隙都是一样宽

 justify-content: center;

效果是所用的盒子水平居中

侧轴对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器-父级）

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

案例:盒子居中效果

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

分配父级剩余的空间

<!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>
        .box {
            width: 1200px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            /* 弹性盒子 */
            display: flex;
        }
        /* 弹性盒子 */
        .box>div {
            /* 伸缩比,占的是父盒子的宽度,把它分成了等份 */
            flex: 1;
            margin-right: 15px;
            background-color: orange;
        }
        .box>div:nth-child(2n) {
            flex: 2;
            background-color: yellowgreen;
        }
        .box>div:nth-child(4) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

例如京东移动端的搜索框部分

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100%;
            height: 50px;
            background-color: pink;
            display: flex;
        }
        .box .left,
        .box .right {
           width: 50px;
           height: 50px;
           background-color:orange;
        }
        .box .center {
            flex: 1;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>