蘇寧首頁（less+rem+媒體查詢）

時間 2020-09-07

標籤蘇寧首頁 less+rem rem 媒體查詢简体版

原文原文鏈接

方案一（less+rem+媒體查詢）

方案：採用單獨製做移動端頁面
技術選型：rem適配佈局（less+ rem+ 媒體查詢）css

採用750px設計尺寸html

步驟

1.搭建相關文件夾結構

2設置視口標籤及引進css初始化樣式

<!-- 設置視口標籤 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 引進css初始化樣式 -->
    <link rel="stylesheet" href="./css/normalize.css">

3.新建common.less文件

新建commem.less文件，設置好常見的尺寸，利用媒體查詢設置不一樣的html字體大小
關心的尺寸有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
劃分的分數設置爲15等份
pc端設置的html字體爲50px(寫在最上面)

4.新建index.less文件

新建index.less文件指的是首頁的樣式
將剛纔設置好的common.less文件導入index.less裏面。
最後把index.css文件引入html文件中

@import 'common';

link與import的區別

import是指把一個樣式文件引入另外一個樣式文件.
link是指把樣式文件引入html中git

body樣式

// 設置body樣式
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;

}