1-H5端技术栈-移动端布局

最新推荐文章于 2023-09-08 08:48:32 发布

金霖海

最新推荐文章于 2023-09-08 08:48:32 发布

阅读量473

点赞数

分类专栏：前端2 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_33396183/article/details/131728238

版权

前端2 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

二阶段内容

第一周：H5移动端开发（蜗牛影城）

第二周：JS高级 webpack前端工程化

第三周：node.js+mongodb实现后端开发

第四周：node.js高级+完整的后端项目

第五周：项目周（在线考试系统）

Day01-H5端技术栈-移动端布局

一、H5概念

HTML4.01可以让我们完成基础的网页开发。

HTML5新增了很多新的技术栈,如下:

语义化标签，新增表单元素，地图定位技术，拖拽技术，其它的扩展技术

H5开发，一般泛指移动端浏览器开发

移动端开发：

H5开发：移动端浏览器开发

app开发：android和ios端app开发

小程序开发：微信小程序开发，支付宝小程序

二、响应式布局和H5端布局

响应式布局

开发一套项目，它会根据屏幕的尺寸，自动实现页面的布局排版.只适用于简单的网页
比如 apple官网，公司官网

H5端布局

PC端开发一套项目，移动端开发一套项目，根据屏幕的尺寸自动选择运行那套项目

三、媒体查询

响应式布局要借助于媒体查询技术来完成

媒体查询就是检测屏幕的大小，根据屏幕尺寸决定如何布局

语法

@media screen and(条件){
    样式
}

案例1-基础案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        /* 媒体查询 */
        @media screen and (width:320px) {
            .box{
                width: 100px;
                height: 300px;
                background: red;
            }
        }

        /* 
            375px ~  500px
        */
        @media screen and (min-width:375px) and (max-width:500px){
            .box{
                width: 250px;
                height: 300px;
                background-color: brown;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

案例2-布局实战

在pc端,一排显示4个div

在移动端,一排显示2个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 400px;
            border: 1px black solid;
            margin: 0 auto;
            display: flex;
        }
        .container .box{
            width: 300px;
            height: 100px;
            background-color: pink;
            margin-left: 20px;
            margin-top: 20px;
        }

        @media screen and (max-width:700px){
            .container{
                flex-wrap: wrap;
            }
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

四、H5移动端概念

英寸：一般用于形容屏幕大小。

手机端屏幕尺寸太多了，无法以某个品牌为标准，最好是以苹果来参考

像素：像素是构成图片或电子屏幕的小方块

比如看图片：200px * 400px

DPI：每英寸包括的点数

是一个抽象的单位，可以用于描述屏幕的像素点。

每英寸包括的像素点越多，显示出来的效果更加细腻。

逻辑分辨率：屏幕固定的大小

物理分辨率：指显示屏最高可显示的像素数

不管你的物理分辨率有多大，网页最终参考逻辑分辨率进行设计。

视口

移动端浏览器视口有三种：

布局视口

页面css布局的界面，默认是980px的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

视觉视口

视觉视口就是屏幕宽度
理想视口

理想视口就是:布局视口的宽度和屏幕宽度一致

100%宽度就是屏幕的宽度，而不再是980px

我们在head中加如下代码,就可以实现理想视口
```
    
 <meta name="viewport" content="width=device-width, initial-scale=1.0" >
```
特点：
1. 只有在移动端浏览器这句话才会生效，在PC端这句话没有作用
2. viewport代表设置视口
3. width=device-width，视口的宽度等于设备的屏幕宽度。
4. initial-scale=1.0：设置当前网页是否缩放，1代表值代表正常不缩放

关于移动端viewport可以设置属性如下：

*属性*	*值*	*描述*
width	数值或者device-width	设置viewport宽度
height	数值	设置viewport高度
initial-scale	数字	设置屏幕的缩放比列
maximum-scale	数字	用户最大缩放比列
minimum-scale	数字	用户最小缩放比列
user-scalable	yes、no	设置用户是否可以缩放屏幕

五、影城布局实战

布局思路

UI提供移动端设计原稿

原稿尺寸通常有：640px 750px 1125px

移动端布局思路：

如果原稿的尺寸是640px,布局的时候以iphone4为准,尺寸缩小一半
如果原稿的尺寸是750px,布局的时候以iphone6为准,尺寸缩小一半
如果原稿的尺寸是1125px,布局的时候以iphoneX为准,尺寸缩小一半
其它的手机让它自适应

相对单位rem和em

rem 相对于html标签 font-size属性的值作为参考

em 相对于父标签上 font-size属性的值作为参考

例子

<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 1rem;
            height: 1rem;
            background-color: red;
        }


    </style>
</head>
<body>
    <div class="box1"></div>

    <div class="box2" style="font-size: 10px;">
        <span style="font-size: 3em;">中</span>
    </div>
</body>
</html>

案列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            页面字体大小默认是16个像素
        */
        @media screen and (width:375px){
            html{
                font-size: 37.5px;
            }
        }

        @media screen and (width:320px){
            html{
                font-size: 32px;
            }
        }

        @media screen and (width:390px){
            html{
                font-size: 39px;
            }
        }

        .box{
            width: 2rem;
            height: 2rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

可以根据不同的屏幕大小，设置rem和px之间换算比列，但是媒体查询实现比较繁琐,没办法考虑所有的设备尺寸。

我们可以自己写一段js脚本，根据屏幕尺寸大小来动态设置html标签的font-size

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 2rem;
            height: 2rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //1.拿到html标签
        let ohtml = document.querySelector("html")
        console.log(ohtml);
        //2.获取设备的宽度
        let width = ohtml.clientWidth
        console.log(width);
        //3.给html添加font-size样式
        ohtml.style.fontSize = width/10 + "px"
    </script>
</body>
</html>

flexible.js插件

这个插件可以完成屏幕的自动适配

(1)在项目中引入js插件，放在head里面，style前面

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

(2)再vscode中安装一个插件，这个插件可以自动将px转化为rem

px跟rem转换的快捷键 Alt+z

(3)px to rem这个插件默认换算比例为 1rem = 16px

我们需要修改换算比列:

当你的原稿是750px，换算单位 1rem = 75px

原稿1125px ，换算单位 1rem = 112.5px

六、语意化标签

语义化标签是H5新增的标签，主要用于网页布局,类似DIV标签,主要是为了提高可读性。

优点：

代码可读性更高，根据标签名字就能知道当前这个模块功能
利于SEO（搜素引擎优化），搜素引擎更喜欢语义化标签，而不喜欢div
浏览器解析语义化标签比较友好，版本低一点的浏览器不支持语义化标签

常见的语义化标签：

header、main、footer、section、map、thead、tbody、tfoot、aside、

详细的标签参考：https://www.w3cschool.cn/html/dict

七、项目

1.蜗牛影城首页布局

2.设置弹性项目的宽度不压缩

flex-shrink: 0;

3.让div里面的内容能够横向滚动

overflow: auto;

4.去掉横向滚动条

&::-webkit-scrollbar {
    display: none;
    width: 0px;
    height: 0px;
}

金霖海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-H5端技术栈-移动端布局

可以根据不同的屏幕大小，设置rem和px之间换算比列，但是媒体查询实现比较繁琐,没办法考虑所有的设备尺寸。我们可以自己写一段js脚本，根据屏幕尺寸大小来动态设置html标签的font-size。语义化标签是H5新增的标签，主要用于网页布局,类似DIV标签,主要是为了提高可读性。(3)px to rem这个插件默认换算比例为 1rem = 16px。手机端屏幕尺寸太多了，无法以某个品牌为标准，最好是以苹果来参考。当你的原稿是750px，换算单位 1rem = 75px。页面字体大小默认是16个像素。
复制链接

扫一扫