不卡视频二区,午夜老司机ae,爽啊日本少妇13n

移動(dòng)適配

rem ：

1.媒體查詢
2.flexible.js

網(wǎng)頁(yè)效果
屏幕寬度不同，網(wǎng)頁(yè)元素尺寸不同（等比縮放）
px單位或百分比布局可以實(shí)現(xiàn)？
px單位是絕對(duì)單位
百分比布局特點(diǎn)寬度自適應(yīng)，高度固定
適配方案
rem
vw / vh
rem單位
相對(duì)單位
rem單位是相對(duì)于HTML標(biāo)簽的自豪計(jì)算結(jié)果
1rem = 1HTML字號(hào)大小
rem移動(dòng)適配 - 媒體查詢
目標(biāo)：能夠使用媒體查詢設(shè)置差異化CSS樣式
思考：
手機(jī)屏幕不同，分辨率不同，如何設(shè)置不同的HTML標(biāo)簽字號(hào)？
媒體查詢
媒體查詢能夠檢測(cè)視口的寬度，然后編寫(xiě)差異化的CSS樣式
*當(dāng)某個(gè)條件成立，執(zhí)行對(duì)應(yīng)的CSS樣式

寫(xiě)法

@media （媒體特性）{
      選擇器 {
         CSS屬性
    }
}

如： 
 @media （width:320px） {
            html {
                font-size: 32px;
      }
}

案例

<!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>
        body {
            line-height: 1;
        }
        /* 以視口寬度375px為例，適配屏幕 */
        @media (width:375.2px) {
            /* 1html 根字號(hào) 37.5px = 視口寬度的 1/10 */
            html {
                font-size: 37.5px;
            }
        }

        @media (width:414.4px) {
            html {
                font-size: 41.4px;
            }
        }

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

使用rem單位設(shè)置網(wǎng)頁(yè)元素的尺寸

思考
手機(jī)屏幕大小不同，分辨率不同，如何設(shè)置不同的HTML標(biāo)簽字號(hào)？
設(shè)備寬度不同，HTML標(biāo)簽字號(hào)設(shè)置多少合適？
設(shè)備寬度大，元素尺寸大
設(shè)備寬度小，元素尺寸小
目前rem布局方案中，將網(wǎng)頁(yè)等分成10份，HTML標(biāo)簽的字號(hào)為視口寬度的1/10

/* 視口寬度320px，根字號(hào)為32px */
@media （width: 320px） {
      html {
        font-size: 32px;
    }
}

/* 視口寬度375px，根字號(hào)為37.5px */
@media (width: 375px) {
      html {
        font-size: 37.5px;
    }
}

/* 視口寬度414px， 根字號(hào)為41.4px */
@media (width: 414px) {
      html {
          font-size: 414.4px;
    }
}

rem適配原理

rem單位尺寸
1.根據(jù)視口寬度，設(shè)置不同的HTML標(biāo)簽字號(hào)
2.書(shū)寫(xiě)代碼，尺寸是rem單位
2.1確定設(shè)計(jì)稿對(duì)應(yīng)的設(shè)備HTML標(biāo)簽字號(hào)
查看設(shè)計(jì)稿寬度 → 確定參考設(shè)備寬度（視口寬度） → 確定基準(zhǔn)根字號(hào)（1/10視口寬度）
2.2 rem單位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem單位的尺寸 = px單位數(shù)值 / 基準(zhǔn)根字號(hào)

flexible

目標(biāo)：使用flexible js配合rem實(shí)現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁(yè)元素尺寸等比縮放效果
1.flexible.js是手淘開(kāi)發(fā)出的一個(gè)用來(lái)適配移動(dòng)端的js框架。
2.核心原理就是根據(jù)不同的視口寬度給網(wǎng)頁(yè)中html根節(jié)點(diǎn)設(shè)置不同的font-size。

<body>
      <div class="box"></div>
       /* 引入移動(dòng)適配的js文件 */
      <script src="./js/flexible.js"></script>
</body>

Less

目標(biāo)：使用Less語(yǔ)法快速編譯生成CSS代碼

Less是一個(gè)CSS預(yù)處理器，Less文件后綴是.Less
擴(kuò)充了CSS語(yǔ)言，使CSS具備一定的邏輯性、計(jì)算能力
注意：瀏覽器不識(shí)別Less代碼，目前階段，網(wǎng)頁(yè)要引入對(duì)應(yīng)的CSS文件
Less文件保存自動(dòng)生成css文件

Less語(yǔ)法

注釋：
單行注釋
語(yǔ)法： //注釋內(nèi)容
快捷鍵：ctrl + /
塊注釋
語(yǔ)法： /* 注釋內(nèi)容 /
快捷鍵：* shift + alt + A **
運(yùn)算：
加、減、乘直接書(shū)寫(xiě)計(jì)算表達(dá)式
除法需要添加小括號(hào) 或 .
注意：
表達(dá)式存在多個(gè)單位以第一個(gè)單位為準(zhǔn)

實(shí)例

/*
    less計(jì)算：
    + - * 除法./或者()

    對(duì)less文件的解釋：
        less文件只是方便程序員寫(xiě)代碼，實(shí)際上在 HTML 中要引用的還是css文件

    注意點(diǎn)：
    1.單位沒(méi)有順序之分，如果一個(gè)表達(dá)式之中有多個(gè)單位，以第一個(gè)單位為準(zhǔn)
    2.運(yùn)算符的前后，要么都加空格隔開(kāi)，要么都不加
    3.將單位統(tǒng)一的方法：ctrl + A全選然后再按 alt + Z 可以將單位統(tǒng)一為 rem / px
*/

.box {
    width: 100 + 100px;
    height: 400px - 200 ;
    font-size: 5 * 6px;
    // 這個(gè)單位如果寫(xiě)在外面是會(huì)有空格，寫(xiě)在里面是沒(méi)有空格的美觀，寫(xiě)在外面不兼容
    width: (400 / 2px);
}

.box1 {
    // 單位沒(méi)有順序之分，如果一個(gè)表達(dá)式之中有多個(gè)單位，以第一個(gè)單位為
    width: 100px + 200deg + 300rem;
    // 這種情況是不能做運(yùn)算的，需要注意
    height: 20 +30px;
    // (./)這是個(gè)除法運(yùn)算，只是less不兼容，不建議用(./)這個(gè)除法表達(dá)式來(lái)做運(yùn)算
    // font-size: 60 ./ 3px;
}

能夠使用Less嵌套寫(xiě)法生成后代選擇器

// 1.生成后代選擇器
.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;

    .title {
        width: 100px;
        height: 100px;
        background-color: pink;

        // .left / .right 屬于同級(jí)選擇器
        .left {
            width: 50px ;
            height: 50px;
            background-color: green;
        }

        .right {
            width: 50px ;
            height: 50px;
            background-color: purple;
        }
    }
}

// 2.生成子代選擇器 >
.father {
    width: 400px ;
    height: 400px;
    background-color: skyblue;

    >.son{
        width: 200px;
        height: 200px ;
        background-color: pink;

        >.sun{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    }
}
// 3.交集選擇器 &符號(hào)指代的是直接上級(jí)
.box1{
    width: 100px;
    height: 100px;
    background-color: skyblue;

    &.box2 {
        width: 50px;
        height: 50px;
        background-color: pink;
    }

    span {
        &.box3 {
            background-color: blue;
        }
    }
}

// 4.并集選擇器
.box1,
.box2
 {
    width: 100px;
    height: 100px;
    background-color: green;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: skyblue;

    &,
    .box2 {
        width: 50px;
        height: 50px;
        background-color: pink;
    }
}

// 5.偽類選擇器  :hover
.box {
    a:hover {
        background-color: #333;
    }
}

.box {
    a {
        &:hover {
            background-color: #444;
        }
    }
}

.box {
    li:hover {
        a {
            background-color: pink;
        }
    }
}

.box {
    li {
        &:hover {
            a {
                background-color: #666;
            }
        }
    }
}

// 6.添加偽元素
.box {
    li {
        a::before {
            content:'';
            background-color: #555;
        }
    }
}

.box {
    li {
        a {
            &::before {
                content: '';
            }
        }
    }
}

// 7.結(jié)構(gòu)偽類選擇器 直接寫(xiě)在選擇器的后面是沒(méi)有提示的
.box {
    li:first-child {
        background-color: #fff;
    }
}

.box {
    li {
        &:nth-child(2) {
            background-color: #fff;
        }
    }
}

嵌套

作用：快速生成后代選擇器
語(yǔ)法：

.父級(jí)選擇器 {
    // 父級(jí)選擇器 
    .子級(jí)選擇器 {
       // 子級(jí)樣式
    }
}
// 示例
.father {
   color: red;
  .son {
    width: 100px;
  }
}
// 生成
.father {
  color: red;
}
.father .son {
  width: 100px;
}

注意：&不生成后代選擇器，表示當(dāng)前選擇器，通常配合偽類或偽元素使用

.father {
  color: red;
  &:hover {
    color: green;
  }
}

// 保存為
.father {
  color: red;
}
.father:hover {
  color: green;
}

變量

方法二：把顏色提前存儲(chǔ)到一個(gè)容器，設(shè)置屬性值為這個(gè)容器名 l 變量：存儲(chǔ)數(shù)據(jù)，方便使用和修改。
語(yǔ)法：
定義變量：@變量名: 值; **
使用變量：CSS屬性：@變量名;
開(kāi)發(fā)網(wǎng)站時(shí)，網(wǎng)頁(yè)如何引入公共樣式？
CSS：書(shū)寫(xiě)link標(biāo)簽
Less：導(dǎo)入
導(dǎo)入：@import "文件路徑";

// 如果是less文件，可以省略后綴.less
@import 'base.less';
@import '01-體驗(yàn)less';

// @import "你要導(dǎo)入的文件路徑";
// 注意：分號(hào)結(jié)尾
// 寫(xiě)法一：
@import "./03-計(jì)算.less";
// 寫(xiě)法二：
@import url(./04-嵌套.less);

@import "./05-變量.less";

Less:導(dǎo)出

方法一：
配置EasyLess插件，實(shí)現(xiàn)所有Less有相同的導(dǎo)出路徑
配置插件：設(shè)置 → 搜索EasyLess → 在setting.json中編輯 → 添加代碼（注意，必須是雙引號(hào)）
方法二：控制當(dāng)前Less文件導(dǎo)出路徑
Less文件第一行添加如下代碼，注意文件夾名稱后面添加

// out: ./css/
// out: ./css/common.css

// out: ./css/
/*
注意點(diǎn)：
 1.路徑如果表示文件夾，最后一定要有/
    注意：如果路徑在最后那里沒(méi)有添加"/"那么它僅僅表示的是文件名
    導(dǎo)出文件夾：// out: ./css/
 2.屬于less配置信息，一定要寫(xiě)在第一行，如果寫(xiě)在第二行，那么第一行不能再寫(xiě)任何內(nèi)容
*/

禁止導(dǎo)出
在less文件第一行添加:（ // out: false ）

// out: false
// 禁止導(dǎo)出

綜合案例（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>游樂(lè)園</title>
    <!-- 引入網(wǎng)頁(yè)主題圖標(biāo) -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入第三方文件 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 引入由 less 生成的 css 文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 輪播圖 banner -->
    <div class="banner">
        <img src="./uploads/banner_1.png" alt="">
    </div>
    <!-- 輪播圖 banner -->

    <!-- 樂(lè)園活動(dòng) -->
    <h3>樂(lè)園活動(dòng)</h3>
    <!-- 樂(lè)園活動(dòng) -->

    <!-- 活動(dòng)卡片 -->
    <div class="card">
        <ul>

            <li>

                <!-- 添加兩個(gè)定位元素 -->
                <!-- 1.進(jìn)行中 -->
                <div class="run">
                    進(jìn)行中
                </div>
                <i class="iconfont icon-shoucang1 collcet"></i>

                <a href="#">
                    <img src="./uploads/item_1.png" alt="">
                <div class="desc">

                    <div class="title">
                        <p class="twoLines">
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                        </p>
                        <span>免費(fèi)</span>
                    </div>

                    <div class="total">
                        <i class="iconfont icon-qizhi qizhi"></i>
                        200人已報(bào)名
                        <i class="iconfont icon-shizhong shizhong"></i>
                        本周六開(kāi)始
                    </div>
                </div>
                </a>
            </li>

            <li>
                <!-- 添加兩個(gè)定位元素 -->
                <!-- 1.進(jìn)行中 -->
                <div class="end">
                    已截止
                </div>
                <i class="iconfont icon-shoucang1 collcet"></i>

                <a href="#">
                    <img src="./uploads/item_2.png" alt="">
                <div class="desc">

                    <div class="title">
                        <p class="twoLines">
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                        </p>
                        <span>免費(fèi)</span>
                    </div>

                    <div class="total">
                        <i class="iconfont icon-qizhi qizhi"></i>
                        200人已報(bào)名
                        <i class="iconfont icon-shizhong shizhong"></i>
                        本周六開(kāi)始
                    </div>
                </div>
                </a>
            </li>

            <li>

                <!-- 添加兩個(gè)定位元素 -->
                <!-- 1.進(jìn)行中 -->
                <div class="end">
                    已結(jié)束
                </div>
                <i class="iconfont icon-shoucang collcet1"></i>

                <a href="#">
                    <img src="./uploads/item_3.png" alt="">
                <div class="desc">

                    <div class="title">
                        <p class="twoLines">
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                            瘋狂的紅包 不一樣的撕名牌 大型家庭親子戶外活動(dòng)
                        </p>
                        <span>免費(fèi)</span>
                    </div>

                    <div class="total">
                        <i class="iconfont icon-qizhi qizhi"></i>
                        200人已報(bào)名
                        <i class="iconfont icon-shizhong shizhong"></i>
                        本周六開(kāi)始
                    </div>
                </div>
                </a>
            </li>
            
        </ul>
    </div>
    <!-- 活動(dòng)卡片 -->

    <!-- 底部 -->
    <footer>
        <a href="#">
            <i class="iconfont icon-index-copy icon1"></i>
            首頁(yè)
        </a>

        <a href="#">
            <i class="iconfont icon-youhuiquan icon2"></i>
            卡券
        </a>

        <a href="#">
            <i class="iconfont icon-iconfront- icon3"></i>
            我的
        </a>
    </footer>
    <!-- 底部 -->

    <!-- 引入移動(dòng)適配js文件 -->
    <script src="./js/flexible.js"></script>
    <!-- 引入移動(dòng)適配js文件 -->
</body>
</html>

綜合案例（Less 保存自動(dòng)生成CSS文件）

@import url(./base.less);

body {
    background-color: #F0F0F0;

    // 預(yù)留底部高度
    padding-bottom: 1.3067rem;
}

// 存放主題文字顏色
@themeColor: #3C3C3C;

// 讓圖片大小適配任何移動(dòng)端屏幕
img {
    width: 100%;
}

// 存放超出兩行以省略號(hào)顯示
.twoLines {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

// 樂(lè)園活動(dòng) 
h3 {
    // 設(shè)置標(biāo)題的字號(hào)大小
    font-size: 0.3733rem;
    // 標(biāo)題四周的邊距
    margin: 0.2667rem 0 0.2667rem 0.4rem;
}

// 活動(dòng)卡片 
.card {

    li {
        // 給每個(gè) li 標(biāo)簽都添加一個(gè)下邊距
        // a 設(shè)置為塊級(jí)元素，給 a 標(biāo)簽設(shè)置尺寸直接撐開(kāi) li 標(biāo)簽的大小
        margin-bottom: 0.2667rem;
        // 父相
        position: relative;

        // 遮罩層
        &:last-child::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
        }

        a {
            // 將 a 設(shè)置為塊級(jí)元素，擴(kuò)大點(diǎn)擊范圍
            display: block;
            height: 6.6667rem;
            background-color: #fff;

            // 將圖片以下的空間用一個(gè)盒子包裹
            .desc {
                padding: 0 0.4rem;

                // 將文本上部分用一個(gè)盒子包裹布局
                .title {
                    font-size: 0.4rem;
                    // 添加彈性容器
                    display: flex;
                    // 主軸一左一右排列
                    justify-content: space-between;
                    margin: 0.2133rem 0 0.4rem;

                    // 用 p 標(biāo)簽來(lái)填充左邊的內(nèi)容
                    p {
                        // 添加固定的寬度，防止擠壓到右邊的內(nèi)容
                        width: 6.9067rem;
                        // 存放主題文字顏色(設(shè)置默認(rèn)的字體顏色)
                        color: @themeColor;
                    }

                    span {
                        color: #FE6249;
                    }
                }

                .total {
                    font-size: 0.2933rem;
                    color: #b4b4b4;

                    i {
                        // 文字垂直中部對(duì)齊
                        vertical-align: middle;
                    }

                    .qizhi {
                        margin-right: 0.1867rem;
                        font-size: 0.2667rem;
                    }

                    .shizhong {
                        margin-left: 0.4rem;
                        margin-right: 0.1333rem;
                        font-size: 0.2667rem;
                    }
                }
            }

        }

        .run {
            position: absolute;
            left: 0.3733rem;
            top: -0.1067rem;
            width: 1.8133rem;
            height: 0.7733rem;
            background: url(../images/status_active.png);
            background-size: 1.8133rem 0.7733rem;
            font-size: 0.32rem;
            color: #fff;
            padding-left: 0.3733rem;
            padding-top: 0.1333rem;
        }

        // li 標(biāo)簽的第二個(gè)定位元素，樣式都是一樣的，就是字體圖標(biāo)用到的有所區(qū)別而已
        .collcet {
            position: absolute;
            right: 0.48rem;
            top: 0.4rem;
            font-size: 0.64rem;
            color: #fff;
        }

        // 第二第三個(gè) li 標(biāo)簽的定位的第一個(gè)元素
        .end {
            position: absolute;
            left: 0.3733rem;
            top: -0.1067rem;
            width: 1.8133rem;
            height: 0.7733rem;
            background: url(../images/status_default.png);
            background-size: 1.8133rem 0.7733rem;
            font-size: 0.32rem;
            color: #fff;
            padding-left: 0.3733rem;
            padding-top: 0.1333rem;
        }

        // 第三個(gè) li 標(biāo)簽定位的第二個(gè)元素
        .collcet1 {
            // 子絕
            position: absolute;
            right: 0.48rem;
            top: 0.4rem;
            font-size: 0.64rem;
            color: #FECA49;
            // 設(shè)置權(quán)重的級(jí)別
            z-index: 2;
        }
    }
}

// 底部 
footer {
    // 添加彈性容器
    display: flex;
    // 固定定位：脫標(biāo)（設(shè)置寬高）
    position: fixed;
    left: 0;
    bottom: 0;
    width: 10rem;
    height: 1.3067rem;
    background-color: #FECA49;

    a {
        // 均分父容器的尺寸
        flex: 1;

        // 添加彈性容器，將內(nèi)容垂直布局
        display: flex;

        // 改變主軸方向
        flex-direction: column;
        // 主軸垂直居中 jcc
        justify-content: center;
        // 側(cè)軸水平居中 aic
        align-items: center;
        // 設(shè)置字體大小
        font-size: 0.2933rem;
        // 內(nèi)容水平居中
        text-align: center;
        color: #D78B09;

        // 字體圖標(biāo)的大小(用法跟字體的樣式是一樣的)
        .icon1 {
            font-size: 0.5653rem;
        }
        .icon2 {
            font-size: 0.4533rem;
        }
        .icon3 {
            font-size: 0.5973rem;
        }

        // :active 模仿 hover 效果，鼠標(biāo)按下未抬起
        &:active {
            color: #fff;
        }
    }
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

移動(dòng)適配

移動(dòng)適配

移動(dòng)適配

rem ：

寫(xiě)法

案例

使用rem單位設(shè)置網(wǎng)頁(yè)元素的尺寸

rem適配原理

flexible

Less

Less語(yǔ)法

實(shí)例

嵌套

變量

綜合案例（HTML）

綜合案例（Less 保存自動(dòng)生成CSS文件）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

移動(dòng)適配

移動(dòng)適配

rem ：

寫(xiě)法

案例

使用rem單位設(shè)置網(wǎng)頁(yè)元素的尺寸

rem適配原理

flexible

Less

Less語(yǔ)法

實(shí)例

嵌套

變量

綜合案例（HTML）

綜合案例（Less** 保存自動(dòng)生成CSS文件 **）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

綜合案例（Less 保存自動(dòng)生成CSS文件）