2. 程式人生 > >less在瀏覽器直接使用以及rem佈局

less在瀏覽器直接使用以及rem佈局

阿新 • • 發佈：2018-11-06

less的語法

  1. 註釋
    • // 只在less中顯示
    • /**/ 會在編譯好的css檔案中顯示
  2. 變數
    • 定義變數用@
      • less中的寫法
      @ly_width:100px;
.box {
    width:@ly_width;
}
      • 編譯後在css中顯示的是
      .box {
    width:100px;
}
  3. 混合
    • 不帶引數的混合
      • 先上less中的程式碼 如果想在.one中應用.border的樣式怎麼辦?
      @ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    border:1px solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
}
      • 寫成下面的樣子
      @ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    border:1px solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border;
}
      • 編譯後在css中顯示的是
        .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }
    • 帶引數的混合---不帶預設值 (可以傳多個引數,以逗號或者分號隔開,推薦用分號 下面以一個引數為例)
      • less中的寫法
      @ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
    border:@border_width solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border(1px);
}
      • 編譯後在css中顯示的是
      .one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 1px solid #ff0000;
}
    • 帶引數的混合---帶預設值 (可以傳多個引數 下面以一個引數為例)
      • less中的寫法
      @ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px;) {
    border:@border_width solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border();
}
      • 編譯後在css中顯示的是
      .one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 3px solid #ff0000;
}
    • 在解決css3相容性時候經常用到
      • 解決border-radius相容
      .border_radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
  4. 匹配模式
    • 可以理解成if 和上面的混合有些相似
      • less中的寫法
      //定義上,下,左,右邊框的樣式
.border(top;@border_width:5px;@border_color:red){
    border-top:@border_width solid @border_color;
}
.border(bottom;@border_width:5px;@border_color:red){
    border-bottom:@border_width solid @border_color;
}
.border(left;@border_width:5px;@border_color:red){
    border-left:@border_width solid @border_color;
}
.border(right;@border_width:5px;@border_color:red){
    border-right:@border_width solid @border_color;
}
//如果想寫通用的樣式 可以在下面的程式碼中寫 格式是固定的 
.border(@_,@border_width:5px;@border_color:red){
    border-color:yellow;
}
.border_use1 {
    //選擇和if差不多 如果是left就呼叫上面對應的
    .border(left);
}
.border_use2 {
    //選擇和if差不多 如果是right就呼叫上面對應的
    .border(right);
}
      • 編譯後在css中顯示的是
      .border_use1 {
    border-left:5px solid #ff0000;
    border-color:yellow;
}
.border_use2 {
    border-right:5px solid #ff0000;
    border-color:yellow;
}
  5. 運算
    • 運算提供了加,減,乘,除操作,還可以做屬性值和顏色的運算...
      • less中的寫法
      @ly_width:100px;
.one {
    width:@ly_widht + 100;
}
      • 編譯後在css中顯示的是
      .one {
    width:200px;
}
  6. 巢狀
    • 可以在一個選擇器中巢狀另一個選擇器,程式碼看起來層次分明,提高程式碼可維護性
      • html結構
      <div class="one">
    <div class="two"></div>
</div>
      • less中的寫法
      @ly_width:100px;
@ly_height:200px;
@ly_color:red;
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .two {
        background-color: green;
    }
}
      • 編譯後在css中顯示的是
      .one {
width: 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}
  7. @arguments變數
    • 可以包含所有的變數,將變數一起處理
      • less中的寫法
      //和前面提到的混合一起舉個栗子  
.border(@border_width;@border_style;@border_color){
    border:@arguments;
}
.one {
    .border(1px;solid;red);
}
      • 編譯後在css中顯示的是
      .one {
    border:1px solid #ff0000;
}

text.less程式碼引入到html中 

​@charset"utf-8";
@color:red;
@fontSize:16px;
@className:box;
/*註釋：在css中可以訪問*/
//註釋：在css中不支援，不會編譯在css檔案中
//變數以@字首
//js命名與js一樣
a {
  color: @color;
  font-size:@fontSize ;
}
//變數名拼接，使用方法:@(變數)
[email protected]{className} {
  color: @color;
}​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/less" href="test.less">
<!--//與css一樣引用，但需要注意一定要加type="text/less"，不然樣式
不會被識別-->
    <script src="lib/less/less.js"></script>  <!--//通過less裡
面的ajax向伺服器請求資料，將less轉換為css-->
    <script>less.watch();</script>   <!--//不用重新整理直接出來樣式-->
</head>
<body>
<a href="javascript:;">天下第一刀，蠻三刀天下第一刀，蠻三刀
    天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀
    天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下
第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，
蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀
天下第一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀天下第
一刀，蠻三刀天下第一刀，蠻三刀天下第一刀，蠻三刀
</a>
</body>
</html>

 

 rem佈局

   流式佈局
        響應式佈局  媒體查詢
        伸縮佈局   flex
        共同點：只能做寬度的適配（排除圖片，因為圖片有寬高自適應）都不能對height進行百分比佈局（等比縮放），只能給固定高度
        rem佈局----通過控制html上的文字大小去控制頁面上所有以rem為單位的基準值控制尺寸
        吧頁面上所有px單位換為rem單位
        怎麼換算？-------預設一個基準值  方便計算   100px = 1rem
        換算公式：當前的rem基準值= 預設基準值/設計稿的寬*當前螢幕的寬
        怎麼去改變js換算 ， 媒體查詢
        裝置 320px 414px 640px
        當前裝置對應的基準值=預設/預設對應的螢幕尺寸*當前螢幕尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        @media(min-width: 320px) {
            html{
                font-size: 50px;
            }
        }
        @media(min-width: 414px) {
            html{
                font-size: 64px;
            }
        }
        @media(min-width: 640px) {
            html{
                font-size: 100px;
            }
        }
        .rem{
            width: 100%;
            background-color: #e20c3a;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="rem">rem</div>
</body>
</html>

 

相關推薦

less在瀏覽器直接使用以及rem佈局

less的語法 註釋 // 只在less中顯示 /**/ 會在編譯好的css檔案中顯示 變數 定義變數用@ less中的寫法 @ly_width:100px; .box { widt

移動端適配以及百分比佈局與rem比較

前言 對於熟悉pc端的小夥伴來說,對於靜態頁面的佈局,一般都是沒有什麼問題的,為了保持各瀏覽器顯示的一致性,無論是選擇優雅降級還是漸進增強,我們有時不得不做相容性處理,比如css中的hack技術,css3中新增屬性新增一些瀏覽器字首等,但在移動端對h5新增的屬性都比較友好,

自適應佈局，響應式佈局以及rem,em區別

一、簡而言之， 自適應：不同大小裝置呈現同樣的頁面效果，只是文字、圖片等的大小不一樣，但是相對位置一樣。即在不同大小裝置看起來一樣 響應式：不同大小裝置可能呈現不一樣的頁面效果            自己畫了一個簡略的示意圖，如下： 二、rem,em區別 rem,em都

移動端rem佈局以及viewport詳解

目前Web Appp 螢幕適配方法有很多，比如流式佈局，限死高度，響應式等方法；我認為rem為最佳的解決方案，它可以以最小的代價適配所有的螢幕 不得不說一下viewport：只有明白了viewport的概念以及meta標籤的使用，才能使網頁適配。 PPK關於三個v

清風帶你學-H5+CSS3（六）使用less維護rem佈局專案

M-web 掌握less的安裝和編譯 掌握less的基本語法 掌握在專案中使用less 掌握rem適配的原理 掌握rem+媒體查詢適配 掌握rem+flexible適配 課程內容 less 什麼是less 作為

js 通過瀏覽器直接打開應用程序（IOS，Android）並判斷瀏覽器內核

agent rtt 程序 javascrip ref java lock roi col 本功能主要用於手機端，如果手機未安裝該APP，則跳轉至下載頁面；否則，直接打開手機中的APP。 <div style="position:absolute; top:84%;

移動端適配方案以及rem和px之間的轉換

場景 adding 區間 tin 每一個 left ios7 分辨率 user 背景 開發移動端H5頁面 面對不同分辨率的手機 面對不同屏幕尺寸的手機 視覺稿 在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。 對於移動端開發而言，為了做到頁面高

js 通過瀏覽器直接打開應用程序（IOS，Android） 標簽： androidios

idm reserve port -a and 網站 als amp param 實現效果 如下圖所示，在手機瀏覽器中訪問京東的手機版網站(m.jd.com)，頂部會有一個廣告圖，點擊這個廣告圖，如果手機上已經安裝了京東App，則直接打開，如果沒有安裝，則開始下載。 實現

OpenSUSE Leap 42.3下通過Firefox Opera Chromium瀏覽器直接執行java應用程序（打開java jnlp文件）實現在服務器遠程虛擬控制臺完成遠程管理的方法

build 自定義 1.8 jnl use 信息 server run java應用 遠程虛擬控制臺依賴於java運行環境（jre），在通過瀏覽器打開鏈接前，系統必須安裝jre環境，遠程管理控制臺其實就是一個java程序，打開相應的網站會下載一個jnlp（java網絡加

解決下載ftp文件過程中，瀏覽器直接解析文件（txt,png等）的問題

filename map 需要 etc home 3.0.0 var att esp 搭建了一個ftp服務器，供用戶進行上傳下載，在下載過程中發現，一些文件，例如txt,jpg,png,pdf等直接被瀏覽器解析了。在瀏覽器中顯示其內容，沒有下載。 下面通過網上查詢得到一些解

移動端自適應佈局方案-rem佈局.md

Rem是CSS3新引入的單位，通過動態設定根元素html的font-size，等比縮放元素大小以達到適應移動裝置的目的。 在W3C官網上是這樣描述rem的——“font size of the root element” 。 當我們指定一個元素的font-size為2

手機端rem佈局詳解（淘寶無限適配）

這是淘寶的github網址，裡面有適配所需的js還有說明文件 地址：https://github.com/amfe/lib-flexible 1. 問題的引出 最近閱讀白樹的博文《移動web資源整理》時，他在博文中有一段指出，如果html5要適應各種解析度的移動裝置，應該使用rem這樣的尺寸

rem佈局實現不同解析度移動終端的自適應、整體縮放

前言 現在手機螢幕解析度越來越多，但我們的需求比較唯一——最佳視覺。  當用戶瀏覽網頁時，根據螢幕的尺寸，來向用戶展示更適合使用者的佈局、文字、圖片、按鈕等等，因此，rem應運而生。  rem（font size of the root element）是指相對於根元素的字型

瀏覽器相容性以及寫法

瀏覽器的相容性以及寫法 第一個 清除浮動的相容性 第二個 透明度的相容寫法 第三個 js獲取節點的相容寫法 清楚浮動在低版本瀏覽器不行，需要處理相容性加一個 .clearfix{ *zoom：1；} 為什麼加了  .clearfix{*zoom：1;} 它是專門針對Ie 6/7低版

php 通過瀏覽器直接下載 csv 格式檔案

<?php $file = 'Hello,World'; $csv_data = mb_convert_encoding($file, "cp936", "UTF-8"); $file_name = time().'.csv'; header("

rem佈局--手機端px轉換rem

/**  * 可伸縮佈局方案  * rem計算方式：設計圖尺寸px / 100 = 實際rem  例: 100px = 1rem  */ ! function(window) {     /* 設計圖文件寬度 */  

移動端自適應佈局解決方案：rem佈局

      之前寫了一篇rem佈局的文章，今天拿出來發現已經過時了。於是再來寫一遍！        2018.10.24更新       首先在html裡面設定一下視口： <meta

web前端課程技術分享之關於rem佈局和vw佈局的理解

 通過rem來實現響應式佈局：   首先來看，什麼是rem單位。rem是一個靈活的、可擴充套件的單位，由瀏覽器轉化畫素並顯示。與em單位不同，rem單位無論巢狀層級如何，都只相對於瀏覽器的根元素（HTML元素）的font-size。預設情況下，h

JVM物件揭祕以及記憶體佈局

下文我將從物件的建立和物件在記憶體中的佈局兩個方面介紹 1.物件的建立 java是一門面向物件的語言，java的世界裡，無時無刻都有新的物件產生。在java語法層面上來看，新建一個物件就是java裡面的new關鍵字。那麼對映到JVM裡面，物件是如何建立的呢。 首先虛擬機器會檢視新建立的物

細說移動端 經典的REM佈局 與 新秀VW佈局

和以往一樣，本次專案也放到了 Github 中，歡迎圍觀 star ~ 1. 前言     方案選擇     食用方式 一、前言 說到前端頁面的佈局方案，可以從遠古時代的Table佈局說起，然後來到 DIV+CSS佈局，之後有了Float佈局，Flex佈局