前端学习--移动端页面的开发制作

AGW.

已于 2024-01-10 13:32:41 修改

阅读量904

点赞数

文章标签：前端学习 html css

于 2023-11-20 09:01:07 首次发布

本文链接：https://blog.csdn.net/weixin_43423833/article/details/134499555

版权

前端学习–移动端页面的开发制作

前言

视口

视口标签<meta>

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

物理像素比是2的意思是，开发中1像素=实际中2像素。

CSS初始化

移动端开发选择

有两种选择，一种是单独制作移动端页面，另一种是响应式页面。多数应用单独制作页面，因为响应式页面需要不断检测用户的可视窗口大小，制作复杂。

单独制作移动端页面类型

名称描述
流式布局百分比布局，比较常见
flex弹性布局强烈推荐
less+rem+媒体查询布局
混合布局

响应式页面类型

名称描述
媒体查询
bootstarp

名称	描述
流式布局	百分比布局，比较常见
flex弹性布局	强烈推荐
less+rem+媒体查询布局
混合布局

名称	描述
媒体查询
bootstarp

1.单独制作移动端页面

流式布局

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style>
        * {
            /* 每个页面的必写内容 */
            margin: 0;
            padding: 0;
        }

        section {
            /*运用流式布局*/
            width: 100%;
            /* 最大最小宽度 */
            max-width: 980px;
            min-width: 320px;
        }

        section div {
            float: left;
            width: 50%;
            height: 400px;
        }

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

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

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

</html>

flex布局

flex布局有很多优势，比如他不用添加浮动，清除浮动；不需要考虑元素种类的（块级元素、行内元素等）；还能通过很简单的语句，将内容进行平均分配。

在这里插入图片描述

在这里插入图片描述
请添加图片描述

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style>
        div {
            display: flex;
            width: 500px;
            height: 300px;
            background-color: black;
            /* 翻转方向的属性了解即可 */
            /* 把主轴设置为y轴 */
            /* flex-direction: column; */
            /* 两边贴边，再分配剩余空间 */
            justify-content: space-between;
            /* 默认不换行 ，这个属性让其换行*/
            flex-wrap: wrap;
            /* 设置子元素在侧轴上的排列方式 */
            /* 如果设置主轴为y轴，那么侧轴就是x */
            /* align-items: center; */
            /* 搭配换行属性使用，设置多行子元素排列方式 */
            /* align-content: center; */
        }

        div span {
            width: 200px;
            height: 60px;
            background-color: plum;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <!-- <span>4</span>
        <span>5</span> -->
    </div>

</body>

</html>

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 200px;
            background-color: plum;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            background-color: blue;

        }

        section div:nth-child(2) {
            /* 用来分配剩余空间，数字代表占多少份 */
            flex: 1;
            background-color: black;
        }

        section div:nth-child(3) {
            width: 100px;
            background-color: red;
        }

        p {
            display: flex;
            width: 60%;
            height: 200px;
            background-color: plum;
            margin: 50px auto;
        }

        p span {
            /* 如果都不给宽度，那么剩余宽度就是一整行 */
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: blue;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

</body>

</html>

在这里插入图片描述

        p span:nth-child(2) {
            flex: 2;
            background-color: blue;
            /* 默认是0，-1小于0，所以第二个盒子排在前面 */
            order: -1;
        }

flex布局案例重点

/* 搜索模块 */
.search-index{
    display: flex;
    /* 固定定位跟父级没有关系，它以屏幕为准 */
    position: fixed;
    top: 0;
    left: 50%;
    /* 固定的盒子应该有宽度 */
    /* 兼容老版本 */
    -webkit-transform: translateX(-50%);
    /* 新版本 */
    transform: translateX(-50%);
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

/*搜索模块中的用户部分*/
.user::before{
    content: "";
    /*行内元素不能设置宽度高度*/
    display: block;
    width: 23px;
    height: 23px;
    /*精灵图*/
    /*精灵图调节位置基本都是负数，也可以使用英语方位词。 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /*精灵图一定要记得缩放*/
    background-size: 104px auto;
    margin: 4px auto -2px;
}

.nav-items{
    /*不冲突的*/
    flex:1;
    display:flex;
}

.subnav-entry li{
    /* 相对于父级来说，里面的子盒子可以写 % */
	/*flex属性中的值可以是百分比，也可以是数字*/
    flex: 20%;
}

在这里插入图片描述

.more{
    position: absolute;
    right: 5px;
    top: 0px;
	/*背景渐变必须添加浏览器私有前缀，如果不添加效果无法实现*/
	/*方位名词是可以改的，左上角left top（前后顺序无所谓）*/
    background: -webkit-linear-gradient(left,#FF506C,#FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

.sales-hd h2{
    position: relative;
	/*为了把h2中的文字隐藏起来*/
    text-indent: -999px;
    overflow: hidden;
}

rem适配布局

rem适配布局的优势是，页面中文字的大小可以随屏幕的大小而变化，页面中元素的宽高可以随着屏幕的变化而等比例缩放。需要注意流式布局和flex布局都是针对宽度的布局，那么高度的设置就需要用rem。

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*html元素*/
        html {
            font-size: 14px;
        }

        div {
            /* 这个文字大小是为了子元素准备的 */
            font-size: 10px;
            /* 上面html中的字体大小的倍数 */
            /* 14*10=140 */
            width: 10rem;
            height: 20rem;
            background-color: blue;
        }

        p {
            width: 10em;
            height: 20em;
            background-color: red;
        }
    </style>
</head>

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

</html>

媒体查询

Less

一句话概括，less是一门css预处理语言，它扩展了css的动态特性。

首先我们建立一个less文件，在less文件中编写less语句。

接下来我们学习less的变量、编译、嵌套以及运算。

rem的适配方案

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        @media screen and(min-width:320px) {
            html {
                /* 320/15=21.33 */
                font-size: 21.33px;
            }
        }

        @media screen and(max-width:750px) {
            html {
                /* 750/15=50 */
                font-size: 50px;
            }
        }

        div {
            /* 这样就实现了等比例缩放（有一个能算出来就行）*/
            /* 100/50=2 */
            width: 2rem;
            height: 2rem;
            background-color: blue;
        }
    </style>
</head>

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

</html>

rem适配布局案例重点部分

在这里插入图片描述

<!-- 第三步：设置视口标签以及引入初始化样式 -->
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

在这里插入图片描述

//common.less文件重点内容
// 设置常见的屏幕尺寸320px、360px等，修改里面的html文字大小

// 一定要写到最上面
html {
 font-size: 50px;
}

// 我们此次定义的划分的份数 为 15
@no: 15;

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

...

// 750
@media screen and (min-width: 750px) {
 html {
     font-size: (750px / @no);
 }
}

在这里插入图片描述

//index.less文件重点内容
//在index.less文件中导入common.less文件
//这句话写完我们只需要引入index.css文件，不需要引入common.css文件
@import "common";

//index.less文件重点内容
//body样式中是一些轻容易不会变的样式。
body {
     min-width: 320px;
     width: 15rem;
     margin: 0 auto;
     line-height: 1.5;
     font-family: Arial, Helvetica;
     background: #F2F2F2;
}

在这里插入图片描述

// 页面元素rem计算公式： 页面元素的大小px / html 字体大小 
// search-content在index.less文件中
@baseFont: 50;

.search-content {
    display: flex;
    position: fixed;
    top: 0;
	//定位的内容居中方法
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: (88rem / @baseFont);
    background-color: #FFC001;
 
	.classify {
        width: (44rem / @baseFont);
        height: (70rem / @baseFont);
        margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
        background: url(../images/classify.png) no-repeat;
        // 背景缩放 background-size: 上面的width(x轴) 上面的height(y轴);
        background-size: (44rem / @baseFont) (70rem / @baseFont);
    }

	.search {
        flex: 1;

        input {
            outline: none;
			//让input框占满
            width: 100%;
            border: 0;
            height: (66rem / @baseFont);
            border-radius: (33rem / @baseFont);
            background-color: #FFF2CC;
            margin-top: (12rem / @baseFont);
            font-size: (25rem / @baseFont);
            padding-left: (55rem / @baseFont);
            color: #757575;
        }
    }
	
	.login {
        width: (75rem / @baseFont);
		//让文字垂直水平居中，加上下面的text-align: center;语句。
        height: (70rem / @baseFont);
        line-height: (70rem / @baseFont);
        margin: (10rem / @baseFont);
        font-size: (25rem / @baseFont);
        text-align: center;
        color: #fff;
    }
}

// nav在index.less文件中
nav {
    width: (750rem / @baseFont);

    a {
        float: left;
        width: (150rem / @baseFont);
        height: (140rem / @baseFont);
		//想要子元素文字水平居中对齐，在它的父亲里面添加即可
        text-align: center;

        img {
            display: block;
            width: (82rem / @baseFont);
            height: (82rem / @baseFont);
            margin: (10rem / @baseFont) auto 0;
        }

        span {
            font-size: (25rem / @baseFont);
            color: #333;
        }
    }
}

rem适配布局案例第二种做法重点部分

可以理解为不再需要less文件。

在这里插入图片描述

<!-- 在方案一引入样式文件的基础上，还需要在 index.html 中 引入 flexible.js 这个文件 -->
<script src=“js/flexible.js”> </script>

/*在index.css文件中*/
body {
	min-width: 320px;
	/*对比方案一添加了max-width,即需要给出完整屏幕大小范围*/
    max-width: 750px;
    /* flexible 给我们划分了 10 等份，对比方案一的 15rem 这里要写 10rem 。 */
	width: 10rem;
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial,Helvetica;
	background: #F2F2F2;
}

插件在vscode中的商店下载。

在这里插入图片描述

修改方法如下：

在这里插入图片描述

/*在index.css文件中*/
/* 如果我们的屏幕超过了 750px 那么我们就按照 750 设计稿来走 不会让我们页面超过 750px */
/*不设置的话，flexible.js文件中有超过750px的显示情况，并且权重较高。*/
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}
/*其余内容和方案一相同*/

2.响应式开发

在这里插入图片描述

请添加图片描述

/*响应式布局容器*/
.container {
    height: 150px;
    margin: 0 auto;
    background-color: pink;
}
/* 超小屏幕 小于 768，就是小于等于767，就是不大于767，用 max-width，布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}
/* 小屏幕 大于等于 768 ，就是不小于768 ，用min-width,布局容器 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}
/* 中等屏幕 */
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}
/* 大屏幕 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}