Less+Rem響應式項目實戰

在瀏覽器端使用less

less無法在瀏覽器端直接使用,瀏覽器不識別
必須解析成css代碼
通過less解析插件（javascript）
引入less文件需要加上type="text/less",less解析插件會遇到type="text/less"時進行解析，其他不解析
less.watch(); 無刷新預覽樣式
以http形式打開網頁預覽,<script src="../lib/less/less.min.js"></script>會通過Ajax方式請求數據，本地啓動方式會跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/less" href="../less/test.less">
    <script src="../lib/less/less.min.js"></script>
    <script>less.watch();</script>
</head>
<body>
<h3>在瀏覽器端使用less</h3>
<p>1.less無法在瀏覽器端直接使用</p>
<p>2.瀏覽器不識別</p>
<p>3.必須解析成css代碼</p>
<p>4.通過less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 無刷新預覽樣式</p>
<p>7.以http形式打開網頁預覽</p>
</body>
</html>

rem基礎

項目結構

SuNing
├── css
├── demo
│   ├── 01-less-在瀏覽器端直接使用.html
│   ├── 02-rem-認識.html
│   └── 03-rem-適配.html
├── images
│   ├── advert.png
│   ├── ***.jpg
├── js
│   └── index.js
├── less  # less分模塊
│   ├── adapter.less
│   ├── banner.less
│   ├── index-swiper.less
│   ├── index.less
│   ├── mixins.less
│   ├── nav.less
│   ├── reset.less
│   ├── tabs.less
│   ├── test.less
│   ├── topBar.less
│   └── var.less
├── lib  #三方庫
│   ├── font-awesome
│   ├── less
│   │   ├── less.js
│   │   └── less.min.js
│   ├── swiper
│   └── zepto
├── index-swiper.html
├── index.html
└── readme.md

使用less對rem進行適配

index.less引入當前頁面所需要的所有模塊，這樣各個模塊中的變量就可以相互使用

/*index.less 引入所需要的所有模塊*/
//變量
@import "var";
//混入
@import "mixins";
//適配
@import "adapter";
//重置樣式
@import "reset";
//模塊
@import "topBar";
@import "banner";
@import "nav";
@import "tabs";

var.less 定義項目用到的所有變量

@charset "UTF-8";
//變量
//rem適配方案不好維護  設備會更新  設計稿尺寸  預設基準值
//適配主流設備十幾種
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//設計稿尺寸
@psdWidth:750px;
//預設基準值
@baseFontSize:100px;
//設備的種類
@len:length(@adapterDeviceList);
//主體顏色
@snColor:#fabc09;

mixins.less項目所有混入代碼
less沒有循環語法，使用函數的迭代模擬循環，給函數的執行附加條件，根據數組的長度去停止當前循環

//遍歷使用的是for循環
//需要序號來判斷  通過序號遍歷 @index 1 開始
//遍歷成功
//提取數組中數據extract(@adapterDeviceList,@index)
.adapterMixin(@index) when ( @index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}

adapter.less 適配方式，調用混入文件中的自定義函數

.adapterMixin(@len);

項目搭建

本項目以750px作爲設計稿寬度,預設基準值爲100px進行適配.

版心

width:100%是因爲適配寬度爲750px,720px當設備寬度750 > 設備寬度 > 720時,會以720爲基準進行適配,這樣會造成屏幕兩邊有空白不利於顯示.
rem 一般用作內部元素(內容)的佈局:圖標,字體,輸入框等等
頁面的大的佈局一般會結合其他佈局,如百分比/伸縮佈局等等

注意:

大的佈局容器寬度要與設計稿一致是寬度最好使用100%

/*版心*/
.sn_container{
  position: relative;
  width: 100%;
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  padding-top: 90rem/@baseFontSize;
  padding-bottom: 100rem/@baseFontSize;
}

輪播圖

因爲圖片本身具有自適應特性,不需要設爲rem,使用百分比進行等比縮放即可

結構

<!--輪播圖-->
    <div class="sn_banner">
        <ul>
            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

樣式

.sn_banner{
  width: 100%;
  overflow: hidden;
  position: relative;
  ul{
    &:first-child{
      width: 100%*10;
      transform: translateX(-100%/10);
      -webkit-transform: translateX(-100%/10);
      li{
        width: 100%/10;
        float: left;
        a{
          display: block;
          width: 100%;
          img{
            display: block;
            width: 100%;
          }
        }
      }
    }
    &:last-child{
      position: absolute;
      right: 20rem/@baseFontSize;
      bottom: 20rem/@baseFontSize;
      li{
        margin-left: 12rem/@baseFontSize;
        width: 12rem/@baseFontSize;
        height: 12rem/@baseFontSize;
        border-radius: 50%;
        float: left;
        background: #fff;
        &.now{
          background: @snColor;
        }
      }
    }
  }
}

工具使用

安裝`tree-node-cli`

npm install -g tree-node-cli
# 執行如下命令即可在終端中生成，複製保存下來即可。
treee -L 3 -I "node_modules|.idea|objects|.git" -a --dirs-first

說明

windows用戶需要用treee代替tree，避免和系統的tree命令衝突。 treee

指定路徑的級別爲3級。
-L 3
忽略文件夾（正則表達式匹配的，.git會匹配到.gitignore,所以.gitignore文件沒有顯示出來）。
-I "node_modules|.idea|objects|.git"
顯示所有文件（默認前綴有.的不會顯示，例如".electron-vue）。
-a
目錄在前，文件在後（默認是字母排序，和idea顯示的順序不一致）。
--dirs-first

完整說明

-V, --version             輸出版本號
-a, --all-files           打印所有文件，包括隱藏文件
--dirs-first              目錄在前，文件在後
-d, --dirs-only           僅列出目錄
-I, --exclude [patterns]  排除與模式匹配的文件。用 | 隔開,用雙引號包裹。 例如 “node_modules|.git”
-L, --max-depth <n>       目錄樹的最大顯示深度
-r, --reverse             按反向字母順序對輸出進行排序
-F, --trailing-slash      爲目錄添加'/'
-h, --help                輸出用法信息

swiper插件使用

<!--輪播圖-->
    <style>
        .swiper-container img{
            width: 100%;
            display: block;
        }
    </style>
    <div class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
            <li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
        </ul>
        <ul class="swiper-pagination">

        </ul>
    </div>

<script src="lib/zepto/zepto.min.js"></script>
<script src="lib/swiper/js/swiper.jquery.min.js"></script>
<script>
    $(function () {
        /*
        * 1.自動輪播
        * 2.無縫循環
        * 3.指示功能
        * */
        new Swiper('.swiper-container',{
            autoplay:1000,
            loop:true,
            pagination:'.swiper-pagination',
            autoplayDisableOnInteraction:false
        });
    })
</script>

移動Web開發--學習筆記四 Less+Rem響應式項目實戰（仿蘇寧）

Less+Rem響應式項目實戰

在瀏覽器端使用less

rem基礎

項目結構

使用less對rem進行適配

項目搭建

版心

輪播圖

工具使用

安裝`tree-node-cli`

說明

完整說明

swiper插件使用

完整項目路徑 https://gitee.com/SoFeelLove/SuNing

致遠OA及相關OA系統集成與二次開發

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

【面試準備】項目經驗——接口自動化項目

ArcGis-學習筆記6-5 外部Excel數據點導入

大數據 - MapReduce編程案例 -BH3

rem學習使用

Android通過藍牙與PC通信

ArcGis-學習筆記5 地圖可視化與出圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

移動Web開發--學習筆記四 Less+Rem響應式項目實戰（仿蘇寧）

Less+Rem響應式項目實戰

在瀏覽器端使用less

項目結構

使用less對rem進行適配

項目搭建

版心

輪播圖

工具使用

安裝tree-node-cli

說明

完整說明

完整項目路徑 https://gitee.com/SoFeelLove/SuNing

安裝`tree-node-cli`