範例Code如下 (自己練習的範例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/*什麼都沒寫 就是預設1920 * 1080背景是 aqua淺藍色*/
body
{
background-color: aqua;
}
/*301px ~ 600 都是chocolate顏色 601px(含以上) 都是 aqua 淺藍色 */
@media screen and (max-width:600px)
{
body
{
background-color: chocolate;
}
}
/*背景顏色 0 ~ 300 px 都是深藍色 blue 如果沒寫別的 301px以上就是aqua淺藍色 一直到無限寬度都是*/
@media screen and (max-width: 300px)
{
body
{
background-color: blue;
}
}
</style>
<body>
</body>
</html>
以下是bootstrap的範例
/ 0px ~ 579.98套用此範例 /
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width/ 介於768px~991.98px之間 /
@media (min-width: 768px) and (max-width: 991.98px) { ... }
全站熱搜
留言列表
