Web移动端-part03(视口、Flex布局)

最新推荐文章于 2024-11-04 17:05:06 发布

一个大萝北

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量130

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/qq_40797578/article/details/127198345

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、移动端特点

移动端：手机上浏览的网页，网页宽度多数为100%

1 、逻辑分辨率&物理分辨率

物理分辨率是电脑硬件自带的，无法更改
制作网页参考的是逻辑分辨率
在pc端，1物理分辨率=1逻辑分辨率
在移动端，1物理分辨率=2逻辑分辨率
Iphone 678 的物理分辨率是 750宽，UI美工设计稿一般设计为720像素，我们前端拿到设计稿应该打开PXCook开启2倍图模式

2、视口

viewport 就是浏览器显示页面内容的屏幕区域（屏幕可视区域）

三种视口：布局视口（layout viewport）

视觉视口（visual viewport）

理想视口（ideal viewport）：设备多宽，网页多宽

使用视口标签设置视口宽度，制作适配不同设备宽度的网页，视口标签：meta

<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 最大缩放倍数为1倍
user-scalable=0 不允许用户缩放页面（移动端） no不允许，Yes允许

二、百分比布局

也叫流式布局

宽度自适应，高度固定

现在不常用

三、Flex布局（弹性布局-重点）

使网页布局更简单、灵活
避免脱标问题

1、作用

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

非常适合结构化布局，给父元素添加display:flex;

组成部分：

弹性容器
弹性盒子:默认在一行，可以设置宽高，不会脱离标准流,没有元素之分
主轴
侧轴/交叉轴

2、主轴对齐方式

   /* 默认从左往右，从起点开始排序 */
   justify-content: flex-start;
   /* 从右往左，从终点开始排列盒子 */
   justify-content: flex-end;
   /* 盒子水平居中 */
   justify-content: center;
   /* 盒子两边靠边，中间自适应 */
   justify-content: space-between;
   /* 盒子自适应，盒子中间额距离按照1:2的比例平均分 */
   justify-content: space-around;
    /* 盒子自适应，盒子中间额距离按照1:1的比例平均分*/
   justify-content: space-evenly;

3、侧轴对齐方式

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

  /* 侧轴对齐方式 */
  /* 从上往下排列盒子 */
  align-items: flex-start;
  /* 从下往上排列盒子 */
  align-items: flex-end;
  /* 垂直居中 */
  align-items: center;
  /* 默认值 拉伸*/
  align-items: stretch;

添加给弹性盒子-子级:align-self
```
align-self:center/flex-start/flex-end/stretch;
```
相同的属性，用来控制某个弹性盒子在侧轴的对齐方式

4、伸缩比

flex:值（值为整数，不带单位）

子盒子等比例分父盒子剩余的大小，当添加宽度时宽不生效

圣杯布局

左右两边固定不变，中间宽度自适应
一般用于移动端顶部搜索部分
方式：两边设置宽高，中间平分父元素剩下的空间flex:1

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 50px;
            display: flex;
        }
        .one{
            width: 50px;
            height: 50px;
            background-color: pink;
        }
        .center{
            flex:1;
            background-color:aquamarine;
        }
    </style>
  </head>
  <body>
     <div class="box">
        <div class="one"></div>
        <div class="center"></div>
        <div class="one"></div>
     </div>
<  /body>

在这里插入图片描述

拓展

初始化浏览器

初始化css又叫“CSS reset”，是指重新设置浏览器默认样式。初始化原因：1、浏览器有兼容性问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。2、初始化CSS可以节约网页代码，节约网页下载时间；还会使得网页内容时更加方便简洁；提高编码质量。

文件夹中的初始化的文件的代码：

<link rel="stylesheet" href="./css/normalize.css">

一个大萝北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录