移动web——流式布局

最新推荐文章于 2022-11-21 15:06:51 发布

蜡笔小新007

最新推荐文章于 2022-11-21 15:06:51 发布

阅读量305

点赞数

分类专栏：移动web 文章标签： css

本文链接：https://blog.csdn.net/nervelin/article/details/106391547

版权

移动web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、多倍图对实际开发的影响

1、测量值永远是物理像素值
2、测量值需要除以屏幕的倍数才能得到css像素值（一般为2倍图）

2、视口的设置

将默认视口设置等于理想视口，写在<head>标签里，将网页宽度设置为设备宽度

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

3、百分比单位

特点：设置了百分比单位的盒子会随着父元素的宽度变化而变化
应用：
如果盒子不需要随着父元素的宽度变化而变化，则直接用px就可以
如果盒子需要随着父元素的宽度变化而变化，则用%单位

4、流式布局

1、什么是流式布局
在移动端使页面宽度可以随着设备的宽度变化而变化，像流水一样
2、实现流式布局的两种方式
2.1使用百分比单位来实现：
适用场景：子元素的宽度都是一样的，其中没有固定宽度的元素，都是自适应

设置每个元素的宽度为20%即可
2.2使用定位属性来实现（两端固定中间自适应）
例：横向状态
将元素设置为固定定位/绝对定位，然后将left/right分别等于左侧盒子和右侧盒子的宽度
适用场景：子元素中既有固定宽度的又有需要自适应宽度的元素
竖向状态，将中间盒子top/bottom分别等于上、下盒子的高度即可

<div class="search">
        <div class="menu"></div>
        <div class="sea"></div>
        <div class="login"></div>
 </div>

.search {
    position: fixed;
    width: 100%;
    height: 44px;
    background-color: #e43130;
}
.menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: chocolate;
}
.sea {
    position: absolute;
    left: 40px;
    right: 40px;
    height: 44px;
    background-color: yellow;
}
.login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: pink;
}

在这里插入图片描述

蜡笔小新007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web——流式布局

1、多倍图对实际开发的影响1、测量值永远是物理像素值2、测量值需要除以屏幕的倍数才能得到css像素值（一般为2倍图）2、视口的设置将默认视口设置等于理想视口，写在<head>标签里，将网页宽度设置为设备宽度<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head>3、百分比单位特点：设置了百分比单位的盒子会随着父元素的宽度变化而变
复制链接

扫一扫

专栏目录