1.使用 @media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
/* 當(dāng)屏幕上頁面課件區(qū)域小于1024時(shí) 執(zhí)行以下css代碼 */
? ? ? ? @media all and (max-width: 1024px) {
? ? ? ? ? ? div:first-child{
? ? ? ? ? ? ? ? background-color: yellowgreen;
? ? ? ? ? ? }
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? }
? ? ? ? ? ? html{
? ? ? ? ? ? ? ? font-size: 32px;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? @media only screen and (min-width: 1280px) {
? ? ? ? ? ? div:first-child{
? ? ? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? }
? ? ? ? ? ? html{
? ? ? ? ? ? ? ? font-size: 64px;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? @media all and (min-width: 1024px) and (max-width: 1280px){
? ? ? ? ? ? div:first-child{
? ? ? ? ? ? ? ? background-color: red;
? ? ? ? ? ? }
? ? ? ? ? ? html{
? ? ? ? ? ? ? ? font-size: 48px;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? @media only print {
? ? ? ? ? ? .waterPrint{
? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? }
? ? ? ? }
