css3響應式布局

2021-10-07 14:29:15 字數 523 閱讀 6323

1、分界點

超小螢幕xs (移動裝置)768px以下

小屏裝置sm 768px-992px

中等螢幕md 992px-1200px

寬屏裝置lg 1200px以上

2、語法:@media screen and (max-width:768px)

"stylesheet" href="css/a.css">

"stylesheet" media="screen and (max-width:900px)" href="css/b.css">

**型別:screen(螢幕) print(印表機)handheld(手持裝置)all(通用)

常用**查詢引數:

1.根元素html的字型大小font-size代表1rem;

2.其他元素的屬性若是rem為單位,則相當於html字型大小的多少倍。

3.響應式開發時,可以通過改變根元素的字型大小,從而改變其他元素屬性的值。

CSS3響應式布局總結

一 摘要 今天給大家總結一下css的響應式布局,首先我們還是先弄清楚,幾種布局的概念.1.靜態布局 static layout 特點 固定死的寬高,典型的應用靜態 2.自適應 特點 1 為不同螢幕定製不同的布局 2 在每個布局中頁面元素不隨著視窗的大小而改變 3.流式布局 特點 1 只有一套布局 2...

響應式布局和css3

1.使用百分比 2.使用em,相對於上下文的百分比 body預設16px,100 1em body 子元素相對body的大小。比如寬度為48px,則設定 width 3em 3.查詢,比較常用的框架bootstrap.css 4.css3 text shadow 陰影 1px 1px 1px 000...

快速最好響應式布局(CSS3)

display flex 伸縮布局模式 給父級加 min width 盒子最小寬度 小於這個寬度,在縮小頁面,盒子不會縮小 max width 盒子最大寬度 大於這個寬度,在放大頁面盒子不會變大,放大的都是空白 flex direction row 預設 column 豎著劃分 justify co...