應(yīng)式布局:只需要開發(fā)一套代碼,只需要一套代碼使頁面適應(yīng)不同的屏幕。
響應(yīng)式設(shè)計(jì)通過檢測視口分辨率,針對不同客戶端在客戶端做代碼處理,來展現(xiàn)不同的布局和內(nèi)容;
比如,當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí),通過百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化,從而實(shí)現(xiàn)響應(yīng)式的效果。
缺點(diǎn):
計(jì)算困難,如果我們要定義一個(gè)元素的寬度和高度,按照設(shè)計(jì)稿,必須換算成百分比單位。
通過@media 媒體查詢,可以通過給不同屏幕的大小編寫不同的樣式來實(shí)現(xiàn)響應(yīng)式的布局。
響應(yīng)式缺點(diǎn):如果瀏覽器大小改變時(shí),需要改變的樣式太多,那么多套樣式代碼會很繁瑣。
<style>
.box {
width: 500px;
height: 500px;
background-color: aqua;
}
@media screen and (max-width: 1280px) {
.box {
width: 400px;
height: 400px;
}
}
@media screen and (max-width: 980px) {
.box {
width: 300px;
height: 300px;
}
}
@media screen and (max-width: 765px) {
.box {
width: 200px;
height: 200px;
}
}
</style>
<body>
<div class="box"></div>
</body>
1、在實(shí)際開發(fā)中,常用的響應(yīng)斷點(diǎn)閾值設(shè)定
(括號后面是樣式的縮寫)
2、在實(shí)際開發(fā)中,常用的兩種適配方案
<style>
body {
background-color: #000;
}
@media screen and (min-width: 576px) {
body {
background-color: red;
}
}
@media screen and (min-width: 769px) {
body {
background-color: yellow;
}
}
@media screen and (min-width: 992px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 1200px) {
body {
background-color: green;
}
}
@media screen and (min-width: 1400px) {
body {
background-color: orange;
}
}
</style>
<style>
body {
background-color: #000;
}
@media screen and (max-width: 1400px) {
body {
background-color: red;
}
}
@media screen and (max-width: 1200px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
@media screen and (max-width: 769px) {
body {
background-color: green;
}
}
@media screen and (max-width: 576px) {
body {
background-color: orange;
}
}
</style>
3、在實(shí)際開發(fā)時(shí),@media 會結(jié)合刪格系統(tǒng)一起來使用,實(shí)現(xiàn)真正意義上的響應(yīng)式開發(fā)。
@media screen and (min-width: 576px) {
.col-sm-1 {
grid-area: auto/auto/auto/span 1;
}
.col-sm-2 {
grid-area: auto/auto/auto/span 2;
}
.col-sm-3 {
grid-area: auto/auto/auto/span 3;
}
……
因代碼過長,完整代碼與文件 可進(jìn)入粉絲群獲取 !
1、rem 如何適配
比如:
html {
font-size: 10px;
}
.box {
width: 10rem;
height: 20rem;
}
2、實(shí)際開發(fā)中如何適配,如何將設(shè)計(jì)稿對應(yīng)的 px 單位轉(zhuǎn)換為 rem 單位
在 px 單位下,一個(gè)盒子的樣式如下:
.box {
width: 700px;
height: 500px;
font-size: 20px;
padding: 10px;
background-color: red;
}
如果我們把總寬 750px 分成 10rem,些時(shí) 1rem = 75px; ,轉(zhuǎn)成對應(yīng)的 rem 單位,就是用對應(yīng)的 px/75px,得到如下結(jié)果。
.box {
width: 9.3333rem;
height: 6.6667rem;
font-size: 0.2667rem;
padding: 0.1333rem;
background-color: red;
}
3、接下來如何適配不同的瀏覽器,實(shí)現(xiàn)等比例的縮放呢 ?
屏幕尺寸 | html 中 font-size 大小 (1rem 大小) |
750px | 75px |
640px | 64px |
480px | 48px |
375px | 37.5px |
320px | 32px |
注:
我們可以用 flexible.js 插件來幫我們實(shí)現(xiàn)
vw 和 vh 分別相對的是視圖窗口的寬度和視口窗的高度。
案例: 寬為 750px 設(shè)計(jì)稿下的某個(gè)元素樣式如下
<style>
body {
margin: 0;
}
.box {
width: 750px;
height: 300px;
background-color: red;
}
</style>
<body>
<div class="box"></div>
</body>
轉(zhuǎn)換為 vw 后的代碼如下:
<style>
body {
margin: 0;
}
.box {
width: 100vw;
height: 40vw;
background-color: red;
}
</style>
<body>
<div class="box"></div>
</body>
彈性布局是一種十分方便的,只需要依賴于 CSS 樣式的實(shí)現(xiàn)響應(yīng)式布局的方式,也是最多用到的一種實(shí)現(xiàn)響應(yīng)式的方法。
彈性布局在父、子元素上都有相對應(yīng)的屬性來規(guī)范子元素在父元素中的 “ 彈力 ”。
如果你才開始學(xué)前端,可以看看,我們這里有html+css階段完整教程,我們在釘釘群里有全套的課程包含(入門到精通課程、4個(gè)綜合項(xiàng)目(稱之為15天訓(xùn)練營,在群里是從第二十三節(jié)課開始的)、30個(gè)練習(xí)案例!)如果需要,可以掃描下方鏈接,添加我,邀請你進(jìn)入釘釘群學(xué)習(xí)!
30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程
node節(jié)點(diǎn)
動距離
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。
根節(jié)點(diǎn)
有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn):
document.documentElement chome object HTMLHtmlElement
document.body IE、FF object HTMLBodyElement
第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。
第二個(gè)屬性是對HTML頁面的特殊擴(kuò)展,提供了對<body>標(biāo)簽的直接訪問(body標(biāo)記)。
窗口尺寸、工作區(qū)尺寸
可視區(qū)尺寸寬度
document.body.clientWidth IE、FF
document.documentElement.clientWidth chome
兼容性寫法:
document.documentElement.clientWidth || document.body.clientWidth;
可視區(qū)尺寸高度
document.body.clientHeight IE、FF
document.documentElement.clientHeight chome
兼容性寫法:
document.documentElement.clientHeight || document.body.clientHeight;
獲取瀏覽器窗口水平滾動條的位置
document.body.scrollLeft;
document.documentElement.scrollLeft
兼容性寫法:
document.documentElement.scrollLeft || document.body.scrollLeft;
獲取瀏覽器窗口垂直滾動條的位置
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
document.documentElement.scrollTop || document.body.scrollTop;
注意:IE、FF已經(jīng)支持documentElement對象的各種屬性, 而
以上兼容性寫法不影響所獲的屬性值
編寫自定義函數(shù):
// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}
// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}
// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。