CSS中的響應式布局

2021-10-03 09:51:00 字數 812 閱讀 5290

在小型**建設中，有運用一套****來適應不同終端解析度的需求，優點：節約製作時間、節約製作成本、便於維護等優點。

css3利用**查詢（media queries）即可針對不同的**型別定義不同的樣式，從而實現響應式布局 。也可以針對不同的解析度設定不同的樣式。

1024解析度以上：pc端


1024 ~ 768 : pad pro


768 ~ 450 : pad mini , mobile 橫屏


450解析度以下： mobile 豎屏
1、值：

all：用於所有裝置

print： 用於印表機和列印預覽

screen：用於電腦螢幕，平板電腦，智慧型手機等。

speech：應用於螢幕閱讀器等發聲裝置

2、用法：

a：在style樣式表中：

@media media值 and （解析度寬度+寬度值）


@media media值 and （解析度寬度+寬度值） and （解析度寬度+寬度值）
注：將需要改變的寫入media下的css中，正常樣式表中寫不需要改變的css樣式，這樣便於後期維護和減少**工作量

1、style樣式表中書寫方法



這是一段測試文字
2、外部引入css書寫方法：



這是一段測試文字
注：link引入的css為正常書寫的css檔案，只不過是樣式需要變化的css的值

css 響應式布局

響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...

CSS 響應式布局

學的太不仔細了，仰天默淚 media query 查詢 常見的屬性 基本語法 href link.css media only screen and max width 480px 先引入外部樣式表，media是css才有的屬性，只有在螢幕解析度小於或等於480px畫素的時候 才會這個外聯樣式才有效...

css 響應式布局

一.使用html中的viewport來實現 viewport語法如下 html 1 width 控制 viewport 的大小，可以指定的乙個值或者特殊的值，如 device width 為裝置的寬度 單位為縮放為 100 時的 css 的畫素 2 height 和 width 相對應，指定高度。3...