CSS：YouTube如何根據屏幕尺寸更改其外觀？

-1

我對如何根據屏幕大小改變它的外觀感興趣，但不使用JavaScript。CSS：YouTube如何根據屏幕尺寸更改其外觀？

親自試一試：如果窗口大小小於700px，徽標會發生變化，請轉到YouTube並查看導航欄。

即使禁用了JavaScript，這也可以使用。

我檢查了頁面的html css文件的資源，但無法找出youtube是如何做到的。

如果有人知道這個竅門或猜測 - 請回答。

來源

2016-09-17 MrSunshine

查找css媒體查詢 – mlegg

他們使用mediaqueries即與響應式設計一個CSS3功能，這允許你定義在尺寸（稱爲斷點），瀏覽器應該呈現的網站與一組不同的CSS屬性。

如果你有以下的CSS樣式表

body { 
    background: black; 
} 

@media (max-width: 600px) { 
    body { 
    background: gold; 
    } 
}

說明一個網站：當瀏覽器或屏幕寬度大於600px的，身體的背景應該是黑色的。如果瀏覽器或屏幕寬度小於600像素，身體背景應爲金色。

body { 
 
    background: black; 
 
} 
 
h1 { 
 
    color: white; 
 
} 
 

 
@media (max-width: 600px) { 
 
    body { 
 
    background: gold; 
 
    } 
 
    h1 { 
 
    color: red; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
</head> 
 
<body> 
 
\t <h1>Demonstration</h1> 
 
</body> 
 
</html>

:)乾杯。

來源

2016-09-17 19:55:53

他們使用的Responsive Web Design (Media Queries)：

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

來源

2016-09-17 19:11:40

感謝您的快速回答哥們：D – MrSunshine

CSS：YouTube如何根據屏幕尺寸更改其外觀？

回答

相關問題