資訊專欄INFORMATION COLUMN
摘要：最小寬度上面代碼表示當屏幕大于或等于時，將采用樣式來渲染頁面。是目標顯示區(qū)域的寬度，例如，瀏覽器寬度。如果使用，那么當手機由豎變橫時，是執(zhí)行的，因為顯示區(qū)域發(fā)生了變化。通常，面向移動設備用戶使用面向設備用戶使用。
CSS3@media查詢
使用@media查詢，你可以針對不同的媒體類型定義不同的樣式。
@media可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設計響應式的頁面，@media是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
媒體類型還支持not和only關鍵字，它們可以用來更方便的定位某個媒體設備：
not:排除某種制定的媒體類型。
@media not print and(color){}
only:指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器；
@media only screen and(color){}
@media only screen and (max-width:500px){
.gridmenu{
width:100%;
}
.gridmain{
width:100%;
}
.gridright{
width:100%;
}
}
@media的具體使用方式
1.最大寬度Max-Width:
上面代碼表示：當屏幕小于600px時，將采用small.css樣式來渲染Web頁面。
2.最小寬度Min Width:
上面代碼表示：當屏幕大于或等于600時，將采用large.css樣式來渲染Web頁面。
3.多個media使用：
上面的表示的是當屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。
max(min)-device-width和max(min)-width區(qū)別max-device-width和max-width區(qū)別：
1.max-device-width是設備整個顯示區(qū)域的寬度，例如，真實的設備屏幕寬度。
2.max-width是目標顯示區(qū)域的寬度，例如，瀏覽器寬度。
3.如果使用max-device-width，那么在PC瀏覽器上瀏覽網頁時，縮小或放大瀏覽器時是不執(zhí)行CSS的，因為‘PC設備’沒有變化。但如果使用max-width，縮小或放大瀏覽器時是執(zhí)行CSS的，因為顯示區(qū)域即瀏覽器大小發(fā)生了變化。
4.如果使用max-device-width，那么當手機由豎變橫時，CSS是執(zhí)行的，因為顯示區(qū)域發(fā)生了變化。
5.通常，面向移動設備用戶使用max-device-width；面向PC設備用戶使用max-width。
看看下面的寫法：
/*移動設備*/
@media screen and (max-device-width:480px){
/*CSS代碼*/
}
/*PC*/
@media screen and(max-width:1024px){
/*CSS代碼*/
}
min-device-width和min-width的區(qū)別，跟max-device-width和max-width的區(qū)別是一樣的。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102401.html
摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...
摘要：涂聚文涂聚文 Media Queries: How to target desktop, tablet and mobile? /* Media Queries: How to target desktop, tablet and mobile? http://webdesignerwall.com/tutorials/css3-media-queries https:/...
摘要：而淘寶移動端方案，還根據你的去計算，而且會進行整體的縮放。淘寶的這種方案，比上面的代碼會好很多。淘寶的方案，解決了另一個問題邊框的問題。 這篇文章，主要是總結一下，我在移動端布局用過的方法。有三種，一種是響應式布局，利用@meida判斷各個size；第二種是REM；最后是設置viewport中的width。 響應式布局 這種感覺是最好理解了，利用@media進行斷點，在每個斷點中編寫c...
閱讀 2688·2023-04-25 17:21
閱讀 2550·2021-11-23 09:51
閱讀 2836·2021-09-24 10:32
閱讀 3768·2021-09-23 11:33
閱讀 1973·2019-08-30 15:44
閱讀 3452·2019-08-30 11:18
閱讀 3518·2019-08-30 10:53
閱讀 622·2019-08-26 13:25
