> CSS > 移动端（基础）

移动端（基础）

3个月前 (09-02) 523次浏览 已收录 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>
结果演示

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协议进行授权
转载请注明原文链接：移动端（基础）
喜欢 (4)

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

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