摘要:并且不能使用絕對單位的其他元素。注意絕對定位的使用,小心引入不同樣式響應(yīng)式設(shè)計(jì)的核心是引入的模塊。利用清除浮動(dòng)的方式實(shí)現(xiàn)設(shè)置列寬容器寬列數(shù)這里定義列使用浮動(dòng)進(jìn)行定位,避免容器內(nèi)沒有內(nèi)容,為容器設(shè)置一個(gè)最小高度設(shè)置列間距使用。
media實(shí)現(xiàn)響應(yīng)式網(wǎng)頁
1 移動(dòng)端允許網(wǎng)頁自動(dòng)調(diào)整</>復(fù)制代碼
響應(yīng)式網(wǎng)頁設(shè)計(jì)Responsive Web Design指可以自動(dòng)識別屏幕寬度,對并對樣式做出相應(yīng)調(diào)整
通過媒體查詢實(shí)現(xiàn)在不同屏幕寬度下加載不同的CSS樣式
</>復(fù)制代碼
viewport表示視口:瀏覽器可視區(qū)域?qū)挾群透叨?/strong>
width=device-width:默認(rèn)網(wǎng)頁寬度等于屏幕寬度
initial-scale=1:原始縮放比例為1,即網(wǎng)頁占屏幕面積的100%
對于IE6、7、8需要使用Polyfill庫:css3mediaqueries.js
2 不使用絕對寬度</>復(fù)制代碼
</>復(fù)制代碼
網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局,所以不能使用絕對寬度進(jìn)行布局。并且不能使用絕對單位的其他元素。
寬度只能使用相對單位百分?jǐn)?shù)100%、vw和vh視口寬度和視口高度
3 相對大小字體
4 響應(yīng)式圖片</>復(fù)制代碼
不能使用絕對單位的元素:字體使用em、rem等相對單位進(jìn)行設(shè)置
自適應(yīng)網(wǎng)頁需要圖片實(shí)現(xiàn)自動(dòng)縮放:只需要將設(shè)置max-width: 100%即可
5 流動(dòng)布局fluid-grid</>復(fù)制代碼
在布局系統(tǒng)中,各個(gè)柵格的位置都是浮動(dòng)的,并不固定。主要利用float實(shí)現(xiàn)柵格系統(tǒng)
float的元素不會在水平方向溢出overflow,出現(xiàn)水平滾動(dòng)條;而是直接滾動(dòng)到前面元素的下方。注意絕對定位的使用,小心
6 media引入不同CSS樣式
</>復(fù)制代碼
響應(yīng)式設(shè)計(jì)的核心是CSS3引入的Media Query模塊。自動(dòng)探測屏幕類型及寬度,符合條件時(shí)加載CSS樣式
Media Query模塊有三種引入方式:
6.1 使用link標(biāo)簽6.2 使用@import</>復(fù)制代碼
</>復(fù)制代碼
利用@import url("tinyScreen") screen and (max-width: 400px);滿足條件時(shí),可以在現(xiàn)有CSS文件中加載其他的CSS文件
注:@import與link標(biāo)簽的區(qū)別:
link屬于HTML標(biāo)簽,除引入CSS樣式表還有其他作用;@import是CSS提供的一種加載CSS文件的方式
link標(biāo)簽可以定義RSS、定義rel連接屬性;@import只能加載CSS文件
HTML頁面被下載并且增量解析,link標(biāo)簽被增量解析到便開始加載;@import需要等到HTML頁面下載完畢才開始加載
JavaScript的DOM接口不能操作@import
@import可以在現(xiàn)有CSS文件中引入
6.3 使用@media</>復(fù)制代碼
在CSS文件中,使用@media引入一段查詢的樣式
</>復(fù)制代碼
@media all and (max-width: 768px) {
/* 滿足查詢條件后應(yīng)用的規(guī)則 */
}
7 12列柵格布局系統(tǒng)
主要步驟:
定義容器寬度:100%,必要時(shí)可以設(shè)置最大寬度max-width。將容器設(shè)置為border-box便于設(shè)置固定寬度的padding
保證行元素不會溢出到其他行:通過前后添加偽元素,清除浮動(dòng)
設(shè)置列寬:根據(jù)100% / 列數(shù),同時(shí)設(shè)置padding值,用作網(wǎng)格的間距;
設(shè)置不同列數(shù)組合section的寬度:col-n = col- * n
設(shè)置響應(yīng)式網(wǎng)格:根據(jù)媒體查詢,設(shè)置不同的列寬即可,或者應(yīng)用不同的列寬
實(shí)現(xiàn)12列柵格系統(tǒng)
</>復(fù)制代碼
/* 使用border-box,便于在百分比寬度容器中設(shè)置固定寬度的padding */
* {box-sizing: inherit;}
html {box-sizing: border-box;}
p{margin: 0;}
/* 定義容器寬度 */
.grid_container {
width: 100%;
max-width: 1200px;
}
/* 定義row:行內(nèi)的元素不會溢出到其他行。利用清除浮動(dòng)的方式實(shí)現(xiàn) */
.row::before,
.row::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
/* 設(shè)置列寬:容器寬 / 列數(shù);這里定義12列 */
/* 使用浮動(dòng)進(jìn)行定位,避免容器內(nèi)沒有內(nèi)容,為容器設(shè)置一個(gè)最小高度1px */
/* 設(shè)置列間距:使用padding。容器使用的是border-box,所以網(wǎng)格水平間距是水平的padding-left與padding-right之和 */
/* 垂直間距是padding-top與padding-bottom */
[class*="col-"] {
float: left;
width: 8.33%;
min-width: 1px;
padding: 10px;
}
/* 多個(gè)網(wǎng)格寬度的組合section */
@media screen and (min-width: 769px) {
.col-md-1 {width: 8.33%;}
.col-md-2 {width: 16.66%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33%;}
.col-md-5 {width: 41.66%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33%;}
.col-md-8 {width: 66.66%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33%;}
.col-md-11 {width: 91.66%;}
.col-md-12 {width: 100%;}
}
/* 都不設(shè)置樣式的具體高度,根據(jù)內(nèi)容撐開 */
/* 響應(yīng)式,以768px為分界點(diǎn) */
@media screen and (max-width: 768px) {
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}
}
/* ------------------------------------------------------------ */
/* 內(nèi)容的樣式 */
[class*="col-"] > p {
height: 50px;
line-height: 50px;
background: #eee;
color: red;
border: 1px solid #999;
}
使用:在屏幕小于768px時(shí),應(yīng)用col-sm-類的樣式。
添加偏移offset功能</>復(fù)制代碼
col-4
col-4
col-4
col-3
col-6
col-3
col-1
col-1
col-2
col-2
col-6
</>復(fù)制代碼
offset的實(shí)現(xiàn)思路是利用margin-left實(shí)現(xiàn)偏移,距離與列寬相同。只需添加響應(yīng)式規(guī)則中即可
</>復(fù)制代碼
@media screen and (min-width: 769px) {
.col-md-1 {width: 8.33%;}
.col-md-2 {width: 16.66%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33%;}
.col-md-5 {width: 41.66%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33%;}
.col-md-8 {width: 66.66%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33%;}
.col-md-11 {width: 91.66%;}
.col-md-12 {width: 100%;}
/* 偏移offset */
.col-md-offset-1 {margin-left: 8.33%;}
.col-md-offset-2 {margin-left: 16.66%;}
.col-md-offset-3 {margin-left: 25%;}
.col-md-offset-4 {margin-left: 33.33%;}
.col-md-offset-5 {margin-left: 41.66%;}
.col-md-offset-6 {margin-left: 50%;}
.col-md-offset-7 {margin-left: 58.33%;}
.col-md-offset-8 {margin-left: 66.66%;}
.col-md-offset-9 {margin-left: 75%;}
.col-md-offset-10 {margin-left: 83.33%;}
.col-md-offset-11 {margin-left: 91.66%;}
.col-md-offset-12 {margin-left: 100%;}
}
8 響應(yīng)式的實(shí)現(xiàn)思路
多寫class,在不同條件應(yīng)用不同的網(wǎng)格;上面例子就是使用這種
利用相同的網(wǎng)格,改變網(wǎng)格的寬度;
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111783.html
摘要:讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術(shù),用于向不同的設(shè)備提供定制的樣式表。 讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術(shù),用于向不同的設(shè)備提供定制的樣式表。為了演示一個(gè)簡單的示例,我們可以更改不同設(shè)備的背景顏色 /* 將body的背景顏色設(shè)置為tan */ body { background-color: tan; } /* 在992px或更低...
閱讀 3021·2021-11-16 11:42
閱讀 3671·2021-09-08 09:36
閱讀 954·2019-08-30 12:52
閱讀 2487·2019-08-29 14:12
閱讀 778·2019-08-29 13:53
閱讀 3590·2019-08-29 12:16
閱讀 647·2019-08-29 12:12
閱讀 2476·2019-08-29 11:16