移动端布局学习之流式布局1

Posted 2021-03-12 huanying2000

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端布局学习之流式布局1相关的知识，希望对你有一定的参考价值。

1.移动端基础

1.1 浏览器现状

技术图片

国内的UC和QQ 百度等手机浏览器都是根据Webkit修改过来的内核，国内目前尚无自主研发的内核，就像国内的手机系统基本上都是局域安卓修改开发的一样.

意思就是:兼容移动端主流浏览器处理Webkit内核浏览器即可。

1.2 手机屏幕的现状

移动端设备屏幕尺寸非常多，碎片化严重

android设备有多种分辨率480*480 480*854 540*960 720*1280 等等

近年来iPhone的碎片化也严重了其设备的主要分辨率有 640*960 640*1136 750*1334 1242*2208等等

作为开发者无需关注这些分辨率因为我们常用的尺寸单位是px

1.3 移动端调试方法

Chrome DevTools(谷歌浏览器)的模拟手机调试

搭建本地web服务，手机和服务器一个局域网内通过手机访问服务器

使用外网服务器直接IP或者域名访问

总之:

移动端浏览器我们主要对Webkit内核进行兼容

我们现在开发的移动端主要针对手机端开发

现在移动端碎片化比较严重，分辨率和尺寸大小不一

2 视口

视口(viewport)就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口视觉视口和理想视口.

2.1 布局视口layout viewport

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

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

2.2 视觉视口visual viewport

用户正在看到的网站的区域注意:是网站的区域

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度

2.3 理想视口 ideal viewport

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

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

需要手动添加meta视口标签通知浏览器操作

meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我的布局视口有多宽。

2.4 meta视口标签

视口标签语法

    <!-- content 属性 -->
    <!-- width：宽度设置的是viewport宽度 可以设置device-width特殊值 -->
    <!-- initial-scale 视图缩放比 大于0的数字 初始的缩放倍数-->
    <!-- maximum-scale 最大缩放比 大于0的数字 -->
    <!-- minimum-scale 最小缩放比 大于0的数字 -->
    <!-- user-scalable 用户是否可以缩放 yes或no（1或0） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

标准的viewport设置:

视口宽度和设备保持一致

视口的默认缩放比是1.0

不允许用户自行缩放

最大允许的缩放比例1.0

最小允许的缩放比例1.0

倍图

物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。比如苹果6，7，8 是750*1334

我们开发时候的1px不是一定等于1个物理像素。

PC端页面，1px等于1个物理像素的。

一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

物理像素就是我们说的分辨率。物理像素比比如iPhone8 一个px能显示两个物理像素，所以物理像素比是2

PC端和早期的手机屏幕 1CSS像素 = 1物理像素

Retina(视网膜屏幕)是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里。从而达到更高的分辨率，并提高屏幕显示的细腻程度。

技术图片

这个时候，对于一张50px*50px的图片，在手机Retina屏中打开，按照上面的分析是要被放大到2倍或者多倍的会造成图片模糊。

所以在标准的viewport中，会使用多倍图来提高图片质量。解决在高清设备中的牧户问题。

通常使用二倍图。因为iPhone8plus 及以上机型的影响还会使用3倍图或者四倍图。背景图片要注意缩放问题。

如果在iPhone8显示50*50图片，我们要准备一张100*100的图片再手动改成50*50 的来使用，这就是二倍图。

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流式布局倍图</title>
    <style>
        /* 我们需要一个50*50(CSS像素)的图片 直接放到我们的iPhone8里面会放大2倍 100*100*/
        /* 我们采取的是放一个100*100的图片 然后手动把图片缩小为50*50(CSS像素) */
        /* 放到iPhone8 中 会放大二倍 但是图片本身就是100*100的 所以不会模糊 */
        /* 在iPhone8中我们准备的图片 会比我们实际需要的大小的2倍 这就是二倍图 */
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 放到手机里会模糊 -->
    <img src="../img/apple50(1).jpg" alt="">
    <!-- 这个不会 -->
    <img src="../img/apple100.jpg" alt="">
</body>

</html>

背景图片缩放：

background-size 属性规定背景图像的尺寸

background-size(宽度高度)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            background: url(../img/dog.jpg) no-repeat;
            /* 如果只写一个参数 高度和宽度一样 */
            /* background-size: 500px; */
            /* 里面的单位可以跟%  相对于父盒子说的*/
            /* background-size: 50%; */
            /* 特殊字符 cover 完全覆盖*/
            /* background-size: cover; */
            /* 把图像扩展至最大尺寸 使宽度和高度完全适应内容区域 当宽度或者高度铺满盒子 就不在进行拉伸
            可能有部分空白区域 等比例缩放 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

背景图片处理:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们有一个50*50的盒子需要一个背景图片 但是根据分析这个图片要准备倍图 */
        /* 通过background-size 缩放成50*50的 */
        div {
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            background: url(../img/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

二倍精灵图的处理方法

1. 在firework里面把精灵图等比例缩放为原来的一半

2. 之后根据大小测量坐标

3. 注意代码里面background-size也要写:精灵图原来宽度的一半

移动端开发选择

移动端主流方案:

1.单独制作移动端页面

通常情况下网址域名前加m(mobile)可以打开移动端通过判断设备，如果是移动设备打开就跳转到移动端界面

2.响应式页面兼容手机页面

三星官网是这样的通过判断屏幕的宽度来改变样式以适应不同终端缺点是制作麻烦需要很大精力去调试兼容性问题。

移动端技术解决方案

移动端浏览器基本以Webkit内核为主，因此我们就考虑Webkit兼容性问题

我们可以放心的使用H5标签和CSS3样式

同时我们浏览器的私有前缀我们只需要考虑添加Webkit即可.

移动端CSS初始化推荐使用 normalize.css

优点:

1.normalize.css 保护了有价值的默认值

2.normalize.css 修复了浏览器的bug

3.normalize.css 是模块化的

normalize.css 文档地址:http://necolas.github.io/normalize.css/

CSS3中的盒子模型

传统模式宽度计算:盒子的宽度=CSS中设置的width+border+padding

CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding

也就是说我们的CSS3中的盒子模型，padding和border不会撑大盒子。

/* CSS3 盒子模型 */
/* box-sizing: border-box; */
/* 传统盒子模型 */
/* box-sizing:content-box */

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3中的盒子模型</title>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型=width + border + padding  */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #ccc;
        }

        div:nth-child(2) {
            /* 有了这句话就让盒子变成CSS3盒子模型 */
            /* padding 和 border 不会再撑大盒子了 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

移动端可以全部使用CSS3盒子模型

PC端如果完全需要兼容我们就用传统模式如果不考虑兼容性我们就选择CSS3盒子模型。

移动端技术解决方案

特殊样式:

/* CSS3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
/* 移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img,a {
　　-webkit-touch-callout: none;
}

移动端常见布局

移动端技术选型

移动端布局和以前我们学习的PC端有所区别:

1.单独制作移动端页面(主流)

>1. 流式布局(百分比布局)

>2.flex弹性布局(强烈推荐)

>3.less + rem + 媒体查询布局

>4.混合布局

2.响应式页面兼容移动端(其次)

>1.媒体查询

>2.bootstarp

流式布局(百分比布局)

流式布局，就是百分比布局也称非固定像素布局

通过盒子的宽度设置成百分根据屏幕的宽度来进行伸缩，不受固定像素的限制内容向两侧填充

流式布局方式是移动Web开发使用的比较常见的布局方式。

例子:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            width: 100%;
            /* 最大宽度 超过980px 就不能再放大了 */
            max-width: 980px;
            /* 最小宽度 小于320px 就不能再缩小了 */
            min-width: 320px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: orange;
        }

        section div {
            float: left;
            width: 49%;
            height: 100px;
        }

        section div:nth-child(1) {
            background-color: pink;
        }

        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

流式布局京东移动首页(部分):

方案:我们采取单独制作移动页面方案

技术:布局采取流式布局

<body>
    <header class="app">
        <ul>
            <li><img src="../images/close.png" alt=""></li>
            <li><img src="../images/logo.png" alt=""></li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
            <input type="text" placeholder="请输入商品内容">
        </div>
        <div class="search-login">
            登录
        </div>
    </div>
    <!-- 主题内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="../upload/banner.dpg" alt="">
        </div>
        <!-- 品牌日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="../upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../upload/pic22.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../upload/pic33.dpg" alt="">
                </a>
            </div>
        </div>
        <!-- 导航栏 -->
        <nav>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="../upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="../upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="../upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="../upload/new3.dpg" alt="">
            </a>
        </div>
    </div>
</body>

</html>

CSS部分:

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    background: #ccc;
    font-size: 14px;
    font-family: ‘-apple-system‘, ‘Helvetica‘,‘sans-serif‘;
    line-height: 1.5;
}
img {
    /* 去除图片底部的空白缝隙 */
    vertical-align: middle;
}

/* 移动端处理的特殊样式 */
* {
    /* 取消点击高亮显示 */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}

img, 
a {
    /* 取消长按提示 */
    -webkit-touch-callout: none;
}

a {
    color: #666;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app {
    height: 45px;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #333;
    color: #fff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 10px;
}

.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63535;
}

/* 搜索 */
.search-wrap {
    position: fixed;
    height: 44px;
    overflow: hidden;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size:20px 18px;
    margin-top: 14px;
    margin-left: 15px;
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    margin-top: 7px;
    border-radius: 15px;
}

.jd-icon {
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 15px;
    background-color: pink;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
    position: absolute;
    top: 0px;
    right: -8px;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
}
.sou {
    position: absolute;
    top: 9px;
    left: 50px;
    width: 18px;
    height: 15px;
    background-color: pink;
    /* 二倍精灵图的做法 */
    /* 1. 在firework里面把精灵图等比例缩放为原来的一半 */
    /* 2. 之后根据大小测量坐标 */
    /* 3. 注意代码里面background-size也要写:精灵图原来宽度的一半*/
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

.search input {
    position: absolute;
    top: 7px;
    left: 80px;
    border: none;
}

.slider img {
    width: 100%;
}
.brand {
    border-radius:10px 10px 0 0;
    overflow: hidden;
}
.brand div {
    float: left;
    width: 33.333333%;
}
.brand div img {
    width: 100%;
}

nav a {
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 12px 0 8px 0;
}
nav a span {
    display: block;
}

/* 新闻模块 */
.news a {
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
    
}
.news a:nth-child(n + 2) {
    width: 25%;
    border-left: 1px solid #e8e8e8;
}
.news a img {
    width: 100%;
}

以上是关于移动端布局学习之流式布局1的主要内容，如果未能解决你的问题，请参考以下文章

手机移动端技术选型之流式布局

0076 移动端常见布局（简短）

移动端Web开发流式布局flex布局rem布局

移动端开发—流式布局

移动端常见布局

移动web开发之流式布局