怎麼設定不同解析度的css樣式
- 青灯夜游原創
- 2021-09-13 17:41:434956瀏覽
在css中，可以使用“@media”規則根據不同的螢幕尺寸，來設定不同解析度的樣式，語法“@media mediatype and|not|only (media feature){css樣式}” 。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用「@media」規則來設定不同解析度的樣式。
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。 @media 查詢的語法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}範例：
/* 设置了浏览器宽度小于1600px时的样式 */
@media screen and (max-width: 1600px) {
.select2-container{
width:328px !important;
}
#address{
width:calc(37% - 3px) !important;
}
}
/* 设置了浏览器宽度小于1367px时的样式 */
@media screen and (max-width: 1367px) {
.select2-container{
width:275px !important;
}
#address{
width:calc(36% + 3px) !important;
}
}可以看出：@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
實例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc {
height: 300px;
border: 1px solid #000;
margin: 0 auto
} //可以去掉边框
@media screen and (min-width: 1201px) {
.abc {
width: 1200px
}
}
/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {
width: 900px
}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {
width: 200px;
}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {
width: 100px;
}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>（學習影片分享：css影片教學）
以上是怎麼設定不同解析度的css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html5怎麼禁止放大頁面下一篇：html5怎麼禁止放大頁面