Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan gaya css untuk resolusi yang berbeza
Bagaimana untuk menetapkan gaya css untuk resolusi yang berbeza
- 青灯夜游asal
- 2021-09-13 17:41:435040semak imbas
Dalam css, anda boleh menggunakan peraturan "@media" untuk menetapkan gaya untuk peleraian berbeza mengikut saiz skrin yang berbeza Sintaksnya ialah "@media mediatype dan|bukan|sahaja (ciri media){gaya css}. " .
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam css, anda boleh menggunakan peraturan "@media" untuk menetapkan gaya untuk resolusi yang berbeza.
Menggunakan pertanyaan @media, anda boleh menentukan gaya yang berbeza untuk jenis media yang berbeza. Sintaks pertanyaan @media:
@media mediatype and|not|only (media feature) {
CSS-Code;
}Contoh:
/* 设置了浏览器宽度小于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;
}
}Dapat dilihat bahawa @media boleh menetapkan gaya yang berbeza untuk saiz skrin yang berbeza, terutamanya jika anda perlu menetapkan reka bentuk Untuk halaman responsif, @media sangat berguna. Apabila anda menetapkan semula saiz penyemak imbas, halaman itu juga akan dipaparkan semula berdasarkan lebar dan ketinggian penyemak imbas.
Contoh:
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>(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya css untuk resolusi yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!