移动端基础之流式布局

浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器等等

总结：兼容移动端主流浏览器，只需要处理webkit内核即可

手机屏幕的现状

移动端设备屏幕尺寸非常多，碎屏化非常严重，常用单位是px

常见移动端屏幕尺寸

在这里插入图片描述

移动端调试方法

在这里插入图片描述
总结

移动端浏览器主要针对于webkit内核即可
常见的移动端主要针对于移动端开发
移动端碎屏化非常严重，分辨率和屏幕尺寸大小不一样
学会用谷歌浏览器模拟手机界面及调试

视口

浏览器是显示页面的屏幕区域

视口：布局视口视觉视口理想视口

布局视口

主要是解决早期pc页面在手机上显示的问题，基本都将视口的分辨率设置为980px

视觉视口

网站的区域，不影响布局视口

理想视口

理想视口，对设备来讲，是合适的视口尺寸
要手动添加meta视口标签来操作视口
简单理解为设备有多宽，布局视口有多宽

总结

视口是浏览器显示页面的屏幕区域。
视口：布局视口视觉视口理想视口
理想视口对设备来讲，是最合适的视口尺寸。简单理解：就是设备有多宽，布局视口就有多宽

meta标签

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

注意：移动端必须要添加视口标签，否则在在移动端开发中，会遇到诸多问题

标准的viewport

设备宽度应当与视口宽度保持一致
不允许缩放
初始的缩放比例为1
最大的缩放比例为1
最小的缩放比例为1

物理像素与物理像素比

物理像素点是指屏幕中显示的最小颗粒，是物理真实存在的
开发过程中，在pc端中1px等于1个物理像素点，但在移动端中，1px不等于1个物理像素
1px等于物理像素点的个数，被称为物理像素比

早期的移动端开发，1px等于1个物理像素点，随着视网膜技术的出现，将更多的物理像素点压缩至一块屏幕中，提高屏幕的分辨率，使屏幕看起来更加清晰`

多倍图

实际开发中，图像会在视网膜屏中被放大n倍

我们准备的图像比实际图像大n倍，然后再手动缩小n倍，这样既可以不再让图像模糊


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img:nth-of-type(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 在移动端的实际开发过程中，我们准备的图像比实际的图像大n倍，然后再手动缩小原来的n倍，即可解决图像模糊的问题 -->
    <!-- 50*50的图像 -->
    <img src="./img/apple50(1).jpg" alt="">
    <!-- 100*100的图像 -->
    <img src="./img/apple100.jpg" alt="">

</body>

</html>

在这里插入图片描述

背景图

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

单位：长度 | 百分比 | conver | contain
cover:背景图像扩展至足够大，使背景图片能够完全覆盖背景区域。
contain:背景图像扩展至最大尺寸，使其高度和宽度完全适应内容区域

注意：只写一个单位，默认为宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 0px auto;
            background: url(./img/picture.jpg) no-repeat;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

背景多倍图

与多倍图的做法一致，但容器要缩小至背景图像一致

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            /* 背景图像：100*100 */
            background: url(./img/apple100.jpg) no-repeat;
            margin: 0px auto;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

移动端开发选择

单独制作移动端页面

京东商城手机版
淘宝触屏版
苏宁易购手机版

网站区域前面加上m，即可打开移动端页面

在这里插入图片描述

响应式页面兼移动端

三星官网

在这里插入图片描述 核心：根据判断屏幕的宽度来改变样式，以适应不同的终端

响应式制作页面比较麻烦，需要花很大精力去调兼容性问题

总结

兼容移动端页面只需兼容webkit内核
可以放心的使用h5和css3的新特性
浏览器的私有前缀只需要添加webkit即可

移动端技术解决方案

引进css初始化样式： normalize.css

在这里插入图片描述
官方下载：https://necolas.github.io/normalize.css/8.0.1/normalize.css

特殊样式

CSS盒子模型

传统的盒子模型：盒子的宽度 = width + padding + border
css3盒子模型：盒子的宽度 = width(border+padding)

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

注意：移动端可以放心的使用css3盒子模型，pc端不考虑兼容性的话，也可使用css3盒子模型


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 800px;
            padding: 20px;
            margin: 20px auto;
            background-color: purple;
            border: 5px solid red;
            /* 引进css3盒子模型 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

去除高亮效果

-webkit-tap-highlight-color: transparent;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>

<body>
    <a href="#">尧子陌</a>
</body>

</html>

在这里插入图片描述

按钮自定义样式

-webkit-appearance: none;


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <input type="button" value="尧子陌">
</body>

</html>

在这里插入图片描述

禁止页面长按弹出菜单

-webkit-touch-callout: none;


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img,
        a {
            -webkit-touch-callout: none;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="./img/apple100.jpg" alt="">
    <a href="https://www.baidu.com/">百度</a>
</body>

</html>

在这里插入图片描述

移动端常见布局

单独制作移动端页面（主流）

百分比布局
flex布局
rem + less + 媒体查询
混合布局

响应式页面兼容移动端

媒体查询
bootstarp

流式布局

流式布局:百分比布局，也称非像素固定布局
宽度设置成百分比，不受固定像素的限制，内容向两侧延伸
百分比布局是移动web开发常见的布局方式


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            margin: 100px auto;
            border: 1px solid red;
        }
        
        div {
            width: 50%;
            float: left;
            height: 150px;
            background-color: rgb(223, 25, 25);
        }
        
        div:nth-of-type(2) {
            background-color: purple;
        }
    </style>
</head>

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

</html>

在这里插入图片描述

移动端基础之流式布局

浏览器现状

手机屏幕的现状

常见移动端屏幕尺寸

移动端调试方法

视口

布局视口

视觉视口

理想视口

总结

meta标签

标准的viewport

物理像素与物理像素比

多倍图

背景图

背景多倍图

移动端开发选择

单独制作移动端页面

响应式页面兼移动端

移动端技术解决方案

特殊样式

CSS盒子模型

去除高亮效果

按钮自定义样式

禁止页面长按弹出菜单

移动端常见布局

单独制作移动端页面（主流）

响应式页面兼容移动端

流式布局

猜你喜欢