pc端的rem布局專題及常見問題 - CSDN

2021-01-19 CSDN技術社區

傳統布局

flex布局

操作方便，布局極其簡單，移動端使用比較廣泛

PC端瀏覽器支持情況比較差

IE11或更低版本不支持flex或僅支持部分

如果是PC端頁面布局，還是採用傳統方式

如果是移動端或者是不考慮兼容的PC則採用flex

flex布局原理

flex是flexible box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局

當我們為父盒子設為flex布局以後，子元素的float、clear和vertical-align屬性將失效

flex布局又叫伸縮布局、彈性布局、伸縮布局、彈性盒子布局

採用flex布局的元素稱為flex容器(flex container)簡稱容器，它的所有子元素自動成為容器成員，稱為(flex item)「項目」

總之：就是通過給父盒子添加flex屬性，來控制盒子的位置和排列方式

父項常見屬性

flex-direction：//設置主軸的方向justify-content：  //設置主軸上的子元素排列方式flex-wrap：//設置子元素是否換行align-content：//設置側軸上的子元素的排列方式(多行)align-items：  //設置側軸上的子元素排列方式(單行)flex-flow：//複合屬性，相當於同時設置了flex-direction和flex-wrap

rem單位(root em)是一個相對單位，類似於em，em是父元素字體大小。例如根元素html：font-size=12px，則非根元素font-size：2rem就是24px

rem的優勢：父元素文字大小可能不一致，但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。

媒體查詢(media query)是CSS3的新語法

使用@media查詢，可以針對不同的媒體查詢類型定義不同的樣式

@可以針對不同的屏幕尺寸設置不同的樣式

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面

目前針對很多蘋果手機，Android手機，平板等設備都用得到多媒體查詢

語法規範

@media mediatype and not only(media feature){css code；}//mediatype 查詢類型all //用於所有設備print //用於印表機和列印預覽scree  //用於電腦屏幕、平板電腦、智慧型手機等//關鍵字，將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件and  //連接多個媒體「且」not  //排除某個媒體「非」only  //指定某個特定的媒體，可以省略//媒體特性width  //定義輸出設備中頁面可見區域寬度min-width  //定義輸出設備中頁面最小可見寬度max-width  //最大可見寬度

書寫規則

從小到大寫或從大到小寫，但習慣從小到大寫。

less介紹

是一門css擴展預處理器。在css的語法基礎之上，引入了變量，mixin(混入)。運算以及函數等功能，大大簡化了css的編寫，並且降低了css的維護成本。

中文網址：

http：//lesscss.cn///常見的css預處理器：sass、less、stylus

less安裝

安裝Node.js

http：//nodejs.cn/download/

檢查是否安裝成功，使用cmd命令，輸入node -v查看版本即可

基於nodejs在線less，使用cmd命令「npm。install -g less」

檢查是否安裝成功，使用「lessc -v」查看版本即可

less變量

@變量名：值；

必須有@為前綴

不能包含特殊字符

不能以數字開頭

大小寫敏感

less編譯 vscodeless插件

easy less插件用來把less文件編譯為css，安裝好後，只要保存一下less文件，會自動生成css文件。

less運算

任何數字，顏色或者變量都可以參與運算，less提供了加減乘除運算。

rem適配方案

vscode px轉換rem的插件cssrem，默認插件的16轉換，需要自己手動配置。

相關焦點

  • 原神pc端在哪下載 PC端下載途徑分享攻略
    ，那麼pc怎麼下載?怎麼下載pc端?下面就來和小編一起來看看吧 原神的公測是一個巨大的好消息，這個讓玩家們等了很久的遊戲也終於是也公測了，但是PC端可以提前兩個星期玩這個也是需要注意一下的，但是pc和手機端的安裝包也是不一樣的，想要去玩pc端的話那麼玩家們就需要找到pc端的安裝包。
  • 《原神》PC端要什麼配置能玩 PC端配置要求一覽
    導 讀 原神pc端最低配置是什麼?PC端在哪個平臺?
  • 卡方檢驗結果分析專題及常見問題 - CSDN
    簡單統計之後，得到總數和死亡率：此處需要使用到ggbarstats函數，其參數可謂是非常的多，詳細的參數表我放在另一個博客中了，有興趣的朋友可以去看看（https://blog.csdn.net/m0_45248682/article/details/104086729）。
  • pc端自適應布局 - CSDN
    常用一屏自適應布局（一）        在web開發的時候，有時候會遇見一些自適應布局，而且是一屏內自適應，特別是寫一些後臺管理系統界面，都是一屏顯示，而且顯示內容布局有固定的，也有不固定的，如果用css3的彈性盒子來解決的話，當然會很容易，但是呢，css3
  • f檢驗 matlab專題及常見問題 - CSDN
    15.71985 15.91986 15.71987 16.71988 15.31989 16.11990 16.2MATLAB實現參考網上多個代碼可得https://www.ilovematlab.cn/thread-246993-1-1.htmlhttps://blog.csdn.net
  • vueweb端響應式布局 - CSDN
    響應式布局和自適應布局詳解響應式布局等於流動網格布局，而自適應布局等於使用固定分割點來進行布局。自適應布局給了你更多設計的空間，因為你只用考慮幾種不同的狀態。而在響應式布局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小，但仍然也算做差異。
  • 約束布局不顯示 - CSDN
    參考：https://blog.csdn.net/murongbingxiao/article/details/78414248?
  • android啟動頁設計專題及常見問題 - CSDN
    轉載請註明出處：http://blog.csdn.net/wangjihuanghun/article/details/63255144啟動頁幾乎成為了每個app的標配，有些商家在啟動頁中增加了開屏廣告以此帶來更多的收入。
  • iot和iot的區別 nb專題及常見問題 - CSDN
    可以預見，隨著物聯網產業布局日趨完善，智慧城市解決方案將進一步成熟。相輔相成，推進智慧城市建設也會帶動物聯網產業發展。　　現在已經有確定的消息，中國聯通8月將全國商用NB-IoT，有業內人士無不擔憂的指出，1.8G NB-IoT產業鏈尚不成熟，預計中國聯通8月商用或許過於樂觀。
  • iot和iot區別 nb專題及常見問題 - CSDN
    可以預見，隨著物聯網產業布局日趨完善，智慧城市解決方案將進一步成熟。相輔相成，推進智慧城市建設也會帶動物聯網產業發展。　　現在已經有確定的消息，中國聯通8月將全國商用NB-IoT，有業內人士無不擔憂的指出，1.8G NB-IoT產業鏈尚不成熟，預計中國聯通8月商用或許過於樂觀。
  • 卡方檢驗相關性專題及常見問題 - CSDN
    那麼有一個問題：協方差數值大小是否代表了相關程度呢？也就是說如果協方差為 100 是否一定比協方差為 10 的正相關性強呢？假如X1、Y1 和 X2、Y2 分別聯合分布圖，如下所示：考察兩個變量的相關關係，首先得看清楚兩個變量都是什麼類型的，統計分析中常見的變量類型有連續型數值變量，無序分類變量、有序分類變量：連續型數值變量：如銷售額、氣溫、工資收入、考試成績；無序分類變量：如性別男和女，血型種類；有序分類變量：如學歷水平小學、初中、高中
  • api 微博數據專題及常見問題 - CSDN
    2018.4.16 說明注意：今天有人言語惡劣地評論我的博客是垃圾，說我的代碼有問題，這篇博客歷史久遠，是我初玩爬蟲寫的博客。我非常感謝能對我的代碼提出意見的人，但是出言不遜，態度惡劣的人我是忍受不了的，有話好好說，是一個現代社會高學歷高知識分子的最低覺悟。代碼我已經改過了，如果還有問題非常歡迎大家來溫和地指出！！！！
  • arduino 低功耗模式專題及常見問題 - CSDN
    設備端和主機端使用GATT(Generic ATTribute) profile進行通信。 如果你聽到GATT這個名詞，就可以將其想成使用BLE，這沒什麼問題。由於與傳統藍牙不兼容，在主機端，和藍牙3.0合併做為雙模，實現成兩者都可以使用的情況比較多。3. BLE藍牙架構圖(了解)最上面綠色的部分是應用層，主要是gatt和att我們可以把它看作是同一層。
  • cdn邊緣計算專題及常見問題 - CSDN
    您必須說，速度足夠快，而且我從未遇到任何問題！ 你猜怎麼了？ 他們已經在網絡中處於邊緣並且離您更近了，簡而言之，他們正在使用Content Delivery Network(CDN )。 CDN如何運作？ (How does CDN work?)
  • ——pc端個人評測
    畫面和優化 9分遊戲的畫面仍然是米哈遊最擅長的二次元風格，裡面的角色設定挺符合二次元的審美，而且pc端的配置要求不高，現在的低端配置都可以帶起來。遊戲的劇情 7分開場動畫後會讓玩家選擇男女，遊戲的主線就是要找到被封印的哥哥或妹妹。
  • qt布局控制項 - CSDN
    Qt基本控制項及三大布局來源: http://blog.csdn.net/a2604539133/article/details/73920696Qt基本模塊一、Qt的三大布局QHBoxLayout：水平顯示布局，所有在其上面擺放的控制項只能水平排列下去；
  • 方差檢驗專題及常見問題 - CSDN
    5 問題總結無
  • bootstrap 有統計圖專題及常見問題 - CSDN
    這種模式還常見於評分系統的分數分布。
  • 擬合優度專題及常見問題 - CSDN
    即：回到擬合優度的問題上，我們就容易理解，當所有樣本點都落在回歸線上時，回歸方程的擬合優度一定是最高的。此時，y的SST只包含SSR部分，沒有SSE。由此可知，在y的SST中，如果SSR所佔比例遠大於SSE所佔比例，換句話說，就是回歸方程如果能夠解釋的變差所佔比例較大，那麼，這個回歸方程的擬合優度就高。