移動 WEB 開發佈局方式 ---- rem 適配佈局

時間 2020-12-14

標籤 javascript css html java less 字體 flex 插件設計 3d 欄目無線简体版

原文原文鏈接

1、rem 基礎

1. rem 單位

em :
相對於父元素的字體大小來講的javascript

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

div {
        font-size: 12px;
    }
    p {
        width: 10em;
        height: 10em;
        background-color: pink;
    }

rem:
相對於 html 元素字體大小來講的css

html {
        font-size: 16px;
    }
    div {
        font-size: 12px;
    }
    p {
        /*width: 10em;*/
        /*height: 10em;*/
        width: 10rem;
        height: 10rem;
        background-color: pink;
    }

總結：rem的優勢就是能夠經過修改html裏面的文字大小來改變頁面中元素的大小，頁面中元素大小能夠控制html

2、媒體查詢

2.1 什麼是媒體查詢

2.2 語法規範

1. `mediatype` 媒體類型

2. 關鍵字

3. 媒體特性

栗子：java

<style>
    /*這句話的意思就是：在咱們屏幕上，而且 最大的寬度是 800像素 設置咱們想要的樣式*/
    /*max-width 小於等於800*/
    /*媒體查詢能夠根據不一樣的屏幕尺寸在改變不一樣的樣式*/
    @media screen and (max-width: 900px){
      body{
          background-color: pink;
       }
    }
    @media  screen  and (max-width: 600px) {
        body{
            background-color: purple;
        }
    }
</style>

栗子2：根據頁面寬度改變頁面背景顏色

less

<style>
    /*1. 小於 540 px 頁面的背景變爲藍色*/
    @media screen and (max-width: 539px){
        body{
            background-color: blue;
        }
    }
    /*2. 540~970 頁面的背景變成綠色*/
    /*@media screen and (min-width: 540px) and (max-width: 969px) {*/
    /*    body {*/
    /*        background-color: green;*/
    /*    }*/
    /*}*/
    /*簡寫爲：*/
    @media screen and (min-width: 540px){
        body{
            background-color: green;
        }
    }
    /*3.大於等於 970 頁面背景變成紅色  */
     @media screen and (min-width:970px){
        body{
            background-color: red;
        }
    }
</style>

2.3 媒體查詢 + rem 實現元素動態變化

栗子：字體

<style>
    *{
        margin: 0;
        padding: 0;
    }
    @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: 0.5rem;
        background-color: deeppink;
        color: #ffffff;
        text-align: center;
        line-height: 1rem;
    }
</style>
<body>
<div class="top">購物車</div>
</body>

2.4 引入資源

1 .語法規範

栗子：flex

需求：當咱們屏幕大於等於 640px 以上的，咱們讓 div 一行顯示 2 個
當咱們屏幕小於 640 咱們讓div一行顯示一個
建議媒體查詢最好的方法是從小到大插件

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

<body>
<div>1</div>
<div>2</div>
</body>

style320.css設計

div {
    width: 100%;
    height: 100px;
}
div:nth-child(1){
    background-color: pink;
}
div:nth-child(2){
    background-color: purple;
}

style640.css3d

div {
    width: 50%;
    height: 100px;
    float: left;
}
div:nth-child(1){
    background-color: pink;
}
div:nth-child(2){
    background-color: purple;
}

總結：引入資源就是針對不一樣的屏幕尺寸調用不一樣的 CSS 文件

3、Less 基礎

3.1 Less做用（維護 css 的弊端）

3.2 Less介紹

3.3 Less 使用

3.4 Less 變量

栗子：

//定義一個顏色爲粉色的變量
@color:pink;
//定義一個 字體爲141像素的變量
@font14:14px;
body {
  background-color: @color;
}
div {
  background-color: @color;
  font-size: @font14;
}
a{
  font-size: @font14;
}

注意：
錯誤的變量名 @1color @color~#
變量名區分大小寫 @color 和 @Color 是兩個不一樣的變量

3.5 Less 編譯

vocode Less插件

Easy LESS 插件用來把 less 文件編譯成 css 文件

安裝完畢插件，從新下載下 vscode

只要保存一下 Less 文件，會自動生成CSS 文件

當修改 my.less 保存的時候，my.css 會自動的去修改

栗子：
my.less

//定義一個顏色爲粉色的變量
@color:pink;
//定義一個 字體爲24像素的變量
@font14:24px;
//錯誤的變量名 @1color @color~#
//變量名區分大小寫 @color 和 @Color 是兩個不一樣的變量
body {
  background-color: @color;
}
div {
  background-color: @color;
  font-size: @font14;
}

21.less的使用.html

<link rel="stylesheet" href="my.css">

<body>
<div>誰還不是一個小仙女呢！</div>
</body>

3.6 Less 嵌套

選擇器的嵌套

栗子：

less文件

.header {
    width: 200px;
    height: 200px;
    background-color:pink;
   // less嵌套 子元素的樣式直接寫到父元素裏面便可
    a {
        color: red;
    }
}

被編譯成css文件以下

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}

交集、僞類、僞元素選擇器的嵌套

僞類栗子：
less文件

.header {
    width: 200px;
    height: 200px;
    background-color:pink;
    a {
        color: red;
        &:hover {
            color: blue
        }
    } 
}

被編譯成css文件以下

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}

僞元素栗子：
less 文件

.nav {
   .logo{
       color: red;
   }
   &::before{
    content: "";
   }    
}

被編譯成css 文件以下

.nav .logo {
  color: red;
}
.nav::before {
  content: "";
}

3.7 Less 運算

栗子1：
less文件

@border:5px + 5;
div {
   width: 200px - 50;
   height: 200px * 2;
   border:@border solid red
}
img {
   width:82 / 50rem;
   height: 82 / 50rem;
}

css 文件

div {
  width: 150px;
  height: 400px;
  border: 10px solid red;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

栗子2：
less文件

@baseFont:50px;
html{
    font-size: @baseFont;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}

css 文件

html {
  font-size: 50px;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

總結：
1.運算符的左右兩側必須用空格隔開
2. 兩個數參與運算，若是隻有一個數有單位，則最後的結果就以這個單位爲準
3. 兩個數參與運算，若是兩個數都有單位，而且單位不一致，則最後的結果以第一個數的單位爲準

注意：
顏色也能夠參與運算，好比
less文件
background-color:#666 - #222
css 文件：
background-color:#444

4、 rem 適配方案

4.1 rem 實際開發適配方案

4.2 rem 適配方案技術使用（市場主流）

4.3 rem 實際開發適配方案一

rem + 媒體查詢 + less

1. 設計稿常見尺寸寬度

2. 動態設置html 標籤 font-size 大小

栗子：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    @media screen and (min-width:320px){
        html{
            font-size: 22px;
        }
    }
    @media screen and (min-width:750px){
        html{
            font-size: 50px;
        }
    }
    div {
        width: 2rem;
        height: 2rem;
        background-color:pink;
    }
</style>
</head>
<body>
<div></div>
</body>