響應(yīng)式布局這件小事(編輯修改稿)
2025-08-21 03:17 本頁面
【文章內(nèi)容簡介】 @media （mindevicewidth:1024px） and （maxwidth:989px），screen and （maxdevicewidth:480px），（maxdevicewidth:480px） and （orientation:landscape），（mindevicewidth:480px） and （maxdevicewidth:1024px） and （orientation:portrait） {srules}在示例二中，設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）；屏寬在480px及其以下手持設(shè)備；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設(shè)備；屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內(nèi)，srules為兼容設(shè)置的樣式表，包含在中括號里面。only（限定某種設(shè)備，可省略），and（邏輯與），not（排除某種設(shè)備）為邏輯關(guān)鍵字，多種設(shè)備用逗號分隔，這一點繼承了css基本語法。可用設(shè)備名參數(shù)：邏輯關(guān)鍵字：可用設(shè)備名參數(shù)：測試Media Queries最后，我們需要對我們剛剛設(shè)計的Media Queries進(jìn)行測試，想要在不同設(shè)備上測試Media Queries的效果，可以使用一個瀏覽工具來檢驗不同尺寸屏幕下的顯示效果，在這里為大家介紹一個不錯的在線工具 – Responsivator，它可以模擬iPhone等各種不同設(shè)備，并且還可以自定義不同尺寸屏幕的顯示效果，只需要輸入一個url甚至是本地的一個url（如：），就可以看到網(wǎng)站在不同尺寸屏幕下的顯示效果。通過Media Queries實現(xiàn)響應(yīng)式布局設(shè)計好了，我們明白了什么是Media Query，那我們一起來運用到響應(yīng)式布局的設(shè)計項目
公司管理相關(guān)推薦
鄂ICP備17016276號-1