> CSS > 移动端（基础）

移动端（基础）

1年前 (2021-09-02) 1330次浏览 已收录 1个评论

meta视口

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale1.0,maximum-scale=1.0,minimum-scale=1.0">
1.0就是不缩放

背景缩放

            /* 背景缩放*/
            /* 只写一个参数，就代表宽度，高度省略，会等比例缩放 */
            /* 可以跟50%，相对于父盒子 */
            background-size: 500px 200px;
            /* cover会完全覆盖盒子，超出的部分隐藏 */
            background-size: cover;
            /* contain高度和宽度等比例拉伸，当宽度或高度铺满div盒子就不再进行拉伸啦 */
            background-size: contain;

倍图

图片倍图

  1. 首先需求是一个50*50的盒子
  2. 但是由于在移动端会被放大两倍，所以，准备一个100*100的图片
  3. 然后设置width:50 hight:50，放入这个盒子中
  4. 再进行放大的话，还是原来的100*100的图片，并不影响清晰度

背景倍图

  1. 首先需求是一个50*50的盒子
  2. 但是由于在移动端会被放大两倍，所以，准备一个100*100的图片
  3. 然后设置背景缩放，放入这个盒子中
  4. 再进行放大的话，还是原来的100*100的图片，并不影响清晰

二倍精灵图做法

  • 在ps中把精灵图等比例缩放为原来的一半
  • 然后测量大小和坐标，并写上
  • 在代码里面写background-size: 200px auto 即水平是200px,垂直不写（精灵图原来宽度的一半，高度等比例缩放）

特殊样式举例

/* 手机链接清楚点击高亮，设置为透明 */
            -webkit-tab-highlight-color:transparent
            禁用长按页面时弹出菜单
            img,a{-webkit-touch-callout:none;}

 移动端常见布局

移动端布局可以分为两大类

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

  • 流式布局（百分比布局）(常用）
  • flex弹性布局（推荐）
  • less+rem+媒体查询布局
  • 混合布局

响应式页面兼容移动端

  • 媒体查询
  • bootstap

流失布局（百分比布局）

  • 流式布局也就是非固定像素布局
  • 通过盒子（一般是对父盒子进行设置）的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
  • max-width 最大宽度 max-height最大高度
<!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,user-scalable=no,initial-scale1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>流式布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 100%;
            /* max-width: 980px; */
        }
        section div{
            float: left; 
            height: 400px;
        }
        section div:nth-child(1){
            width: 40%;
            background-color: rgb(223, 0, 0);
        }
        section div:nth-child(2){
            width: 60%;
            background-color: rgb(38, 125, 224);
        }
    </style>
</head>
<body>

    <section>
        <div></div>
        <div></div>
    </section>
</body>
</html>
结果演示

flex弹性布局（推荐）

用来为盒子模型提供最大的灵活性，任何一个容器都可以使用。

特点：

  • 当父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效
  • 子容器可以横向排列也可以纵向排列
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
<!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>flex弹性布局</title>
    <style>
        div{  
            display: flex;        
            width: 80%;
            height: 300px;
            background-color: aqua;
            justify-content: space-around;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: blue;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
结果演示

常见父元素属性

flex-direction设置主轴的方向

也可以成为行和列，即项目的排列方向

  • x轴即水平向右
  • y轴即水平向右
  • 主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，子元素是根据主轴来排列的

justify-content设置主轴上的子元素排列方式

使用这个属性之前一定要确定好主轴是哪个

flex-wrap设置子元素是否换行

  • 默认是不换行的，只是通过自动缩小再放入父元素里面的
  • flex-wrap:wrap 换行

设置水平垂直居中

设置主轴(默认x轴）水平居中
justify-content: center;
align-items: center;

align-items设置侧轴上子元素排列方式（单行）

该属性是控制子项在侧轴（默认是Y轴）上的排列方式，在子项为单项（单行）的时候使用

align-content这是侧轴上子元素的排列方式（多行）

该属性只能用于子项出现换行的情况（多行），在单行下是没有效果的，结合上节说的flex-wrap:wrap 换行使用

flex布局子项常见属性

flex属性

定义子项目分配剩余空间，用flex来表示占多少份数

order:n 可以进行双飞翼（即设置显示位置）

左侧右侧固定，中间自适应测试：

<!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>分配空间</title>
    <style>
        div{
            display: flex;
            margin: 0 auto;
            width: 80%;
            height: 100px;
            background-color: aqua;
        }
        div span:nth-child(1){
            width: 150px;
            height: 100px;
            background-color: blue;
        }
        div span:nth-child(2){
            flex: 1;占一份
            background-color: rgb(4, 255, 4);
        }
        div span:nth-child(3){
            width: 150px;
            height: 100px;
            background-color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
结果演示

align-self控制（单个或多个）子项自己在侧轴上的排列方式

<!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>控制单个子项</title>
    <style>
        div{
            display: flex;
            margin: 0 auto;
            width: 80%;
            height: 100px;
        }
        div span:nth-child(1){
            width: 150px;
            height: 100px;
            background-color: blue;
        }
        div span:nth-child(2){
            flex: 1;
            background-color: rgb(4, 255, 4);
            align-self: flex-end;
         }
        div span:nth-child(3){
            width: 150px;
            height: 100px;
            background-color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
结果演示

grid布局

基本概念里的属性解释,在下文中会有衔接.理解属性解释,才能更好的理解下文各个内容.

其中每一个grid布局都有隐藏的网格线:

其中上边的网格线(单元格)可以用以下代码实现,但是没有效果,只是定位用的.

/* [c1]代表第一条线 */
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

容器属性 grid-template-*

想要多少行或者列,就填写相应属性值的个数,不填写,就自动分配.

单写行或者列,另外者没有写,会自适应大小充满盒子(比如只写了行,没有写列)

  • fr表示比例关系,即按比例平分盒子.
  • minmax() 函数产生一个长度范围,表示长度只能在这个范围中,参数为最小值和最大值.在盒子没有宽度的情况下使用
  • auto 该列/行自动

测试

<!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>
        .main{
            display: grid;
            /* 3个100,代表有3列,每一列宽度100px */
            /* grid-template-columns: 100px 100px 100px; */

            /* 上边代码等价于 */

            /* grid-template-columns: repeat(3,100px); */

            /* 当盒子没有给宽度,auto-fill会自动根据子项和100px来撑开盒子 */
            /* grid-template-columns: repeat(auto-fill,100px); */

            /* 按比例平分盒子 */
            /* grid-template-columns: 1fr 2fr 3fr; */

            /* 中间自动分配 */
            grid-template-columns: 100px auto 100px;

            /* 第二列宽度大小的变化最下只能变到150px,在盒子没有宽度的情况使用 */
            /* grid-template-columns:1fr minmax(150px,1fr); */

            /* 4个100,代表有4行,每一行宽度100px */
            grid-template-rows: 100px 100px 100px 100px;

            width: 600px;
            height: 600px;
            border: 10px solid red;
        }
        .item{
            background-color: pink;
            font-size: 20px;
        }
        .item:nth-child(2n){
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">0</div>
    </div>
</body>
</html>
结果演示

容器属性 row-gap/column-gap/gap

子项相互之间的距离

  • row-gap 行与行之间的距离
  • column-gap 列与列之间的距离
  • gap 前两个属性合起来的写法(简写) 例 gap:20px 20px 或者 gap:20px

容器属性 grid-template-areas

一个区域有单个或者多个单元格组成

grid-template-areas: 'a a a' /* 第一行的三个网格划分为一个区域,名字为a*/
                     'd e f' /* 第二行三个网格对应不同的区域*/
                     'g . i';/* 第二行左右各占一个区域,中间不给区域名字*/

其实给容器设置区域,等价于grid-template-*设置行和列的个数了

容器属性 grid-auto-flow

划分网格后,容器的子项会按照默认顺序“先行后列”排列,即填满第一行,再开始放第二行,就是子项的排列顺序.

比如下图的三列布局

又比如下图三列布局,其中有子项太大,导致后边放不下其他子项,就会造成页面的浪费,使用dense就能紧密排列.

容器属性 justify-items(水平方向) / align-items(垂直方向)

justify-items:start / end / center / stretch

其中justify-items(水平方向) + align-items(垂直方向) 可以用place-items : center center简写他们两个

容器属性 justify-content(水平方向) / align-content(垂直方向)

设置整个内容区域的水平和垂直的对齐方式

容器属性 grid-auto-columns /  grid-auto-rows

用来设置多出来的项目宽和高

项目属性 grid-column-start……

从哪条网格线开始,哪结束

上图的两个属性设置,可以简写为 grid-column: 1 / 3 ;

另外还有grid-column-start:span 2 ; 代表跨越几个网格线开始

项目属性 gird-area

指定项目放在哪一个区域

项目属性 justify-self / align-self / place-self

rem适配布局（推荐）

 rem单位

rem是一个相对单位，类似于 em相对于父元素字体大小，不同的是rem的基准是相对于html元素的字体的大小

优点：

  • 可以通过修改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>rem单位</title>
    <style>
        html{
            font-size: 14px;
        }
        div{
            font-size: 12px;
        }
        p{
            width: 10rem;
            height: 10rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>
结果演示

媒体查询

  • 使用@media查询，可以针对不同的屏幕尺寸设置不同的样式
  • 重置浏览器大小的过场中，页面也会根据浏览器的宽度和高度重新渲染页面

语法：

@media mediatype and|not|only (media feature){
                css;
            }
  • mediatype 媒体类型
  • media feature媒体特性

媒体类型

关键字

关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

  • and 可以将多个媒体特性链接到一起，“且”
  • not 排除某个媒体类型， “非”
  • only 指定某个特定的媒体类型

媒体特性

<!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>媒体查询</title>
    <style>
        /* 在屏幕上、最大宽度是800像素(即小于等于800px才会变成红色)，设置成我们规定的样式 */
        @media screen and (max-width:800px){
            body{
                background-color: red;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>
结果演示

媒体查询+rem实现元素动态大小变化

<!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>动态变化</title>
    <style>
        /* 由于实现不了动态变化，故注释
        html{
            font-size: 100px;
        } */
        @media screen and (min-width:320px) {
            html{
                font-size: 50px;
            }
        }
        @media screen and (min-width: 640px) {
            html{
                font-size: 100px;
            }
        }
        .top{
            height: 1rem;
            font-size: .5rem;
            /* text-align: center;
            line-height: 1rem; */
            background-color: red;
            color: rgb(255, 240, 240);
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>

</html>
结果演示

引入资源（了解）

当样式比较多的时候，可以针对不同的媒体使用不同的stylesheets(样式表)，即直接在link判断设备的尺寸，然后引用不同的css文件。

<link rel="stylesheet" href="style.css" media="screen and (min-width: 320px)">
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：移动端（基础）
喜欢 (5)

您必须 登录 才能发表评论！

(1)个小伙伴在吐槽
  1. 补：百分比布局缺点是不能确定高度
    王学龙2021-09-05 21:02