移动web（一）移动web基础知识点、流式布局

最新推荐文章于 2024-02-20 20:36:26 发布

小公举plum

最新推荐文章于 2024-02-20 20:36:26 发布

阅读量1.2k

点赞数 2

分类专栏： web开发基础移动web开发文章标签：移动 web

web开发基础同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

移动web开发

4 篇文章 0 订阅

订阅专栏

移动web（一）移动web基础知识点、流式布局

1、为什么要去研究移动web

移动web已经从趋势变成了一个主流了，互联网的流量入口已经大于PC端的流量入口

2、兼容性问题

在国内的移动web浏览器绝大部分都是基于webkit内核的，所以一些css3和h5的新特性绝大部分都被支持，需要添加前缀，但是，不同机型之间可能会略有不同，所以需要自己踩坑。

3、移动web和PC相比的差异性在哪里

移动web的只要核心就是做自适应的布局，在手持设备上基本都是通栏，并且布局的细节比PC端要少，文字内容和模块也相对偏少

4、移动端常见的布局–流式布局（百分比布局）

【1】流式布局（百分比布局）

流式布局是移动web开发使用的常用布局方式之一。

【2】流式布局下的几个页面特征：

宽度自适应，高度写死，不能百分百去还原设计图
一些小ICON 图标等都是写死的不是所有的东西都是自适应的，一般都是模块会呈现自适应
一些产品插入图也就是img等都默认设置宽度百分百，让其自动保持等比例缩放，一般不予写死

字体大小等都是写死的

【注意】常用的是rem结合流式布局的写法，使用rem去计算高度，百分比去计算宽度，实现宽高完全自适应。

【3】移动端经典的几个模块布局

1）左侧固定，右侧自适应

左侧盒子直接写死宽高，并且浮动；右侧盒子直接不写宽，直接用margin-left去挤出距离，这个盒子默认会自动内减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧固定右侧自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width:150px;
            height:400px;
            float: left;
            background: pink;
        }
        .right {
            margin-left: 150px;
            height:400px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

2）圣杯布局（两侧固定，中间自适应）

左右的盒子都写固定的宽高，然后分别左浮动 右浮动，中间的盒子直接用margin去挤出距离，不写宽自动内减，右边html里面浮动的结构一定要放到标准流盒子的前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局（两侧固定中间自适应）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width:100%;
            height:400px;
        }
        .left {
            width:150px;
            height:400px;
            float: left;
            background: pink;
        }
        .right {
            width:150px;
            height:400px;
            float: right;
            background: yellow;
        }
        .center {
            margin-left: 150px;
            margin-right: 150px;
            height:400px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

3）右侧盒子固定，左侧自适应

右侧盒子直接写死宽高，并且浮动，左侧盒子直接不写宽，直接用margin-left去挤出距离，这个盒子默认会自动内减，注意：右侧盒子在结构上在左侧盒子的前面，先浮动，后标准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右侧固定左侧自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .right {
            width:200px;
            height:400px;
            float: right;
            background: green;
        }
        .left {
            margin-right: 200px;
            height:400px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="right"></div>
    <div class="left"></div>
</body>
</html>

4）中间固定，两边自适应

中间盒子直接写死宽高，并且定位居中，左右侧盒子直接width百分50%，并且浮动，并配合padding和内减去实现自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间固定两侧自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width:80%;
            height:400px;
            margin:0 auto;
            background: gray;
        }
        .left {
            width:50%;
            height:100%;
            float: left;
            background: green;
            padding-right: 50px;
            box-sizing:border-box;
            /*
              在设置了box-sizing为border-box后，
              容器的高宽就是实际容器的高宽，
              而不是单纯指的是内容区的大小。
              这时候的高宽计算方式把padding和border大小也算进来了。
            */
        }
        .right {
            width:50%;
            height:100%;
            float: right;
            background: blue;
            padding-left: 50px;
            box-sizing:border-box;
        }
        .center {
            width:100px;
            height: 400px;
            background: orange;
            margin:0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

5）等分布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等分布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width:100%;
            height:400px;
            background: gray;
        }
        .content {
            width:25%;
            height:100%;
            float: left;
        }
        .one {
            background: red;
        }
        .two {
            background: yellow;
        }
        .three {
            background: green;
        }
        .four {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="content one"></div>
        <div class="content two"></div>
        <div class="content three"></div>
        <div class="content four"></div>
    </div>
</body>
</html>