[JQM][CSS][001][MVC 4 Mobile Features]基本範例CSS Media Query + Viewport

2015-10-28

3459
0
2015-12-14

responsive web design大多的效果都是透過css media query做出來的

要利用JQuery Mobile + ASP.NET MVC做行動網站的話更是不可或缺的技術

以ASP.NET MVC專案為例的話，記得CSS語法都要寫在/Content/site.css裡面(要改bootstrap.css也是可以拉，功力夠的就可以改這個...)

，這邊介紹簡單範例

1.如果瀏覽器寬度小於???的時候，套用以下css，

ps.only關鍵字是避免老舊的瀏覽器（例如：ie6~8）吃到這個css，而screen關鍵字則是代表media type=screen，screen的範圍包括桌上型電腦、筆電、平板、手機，如果把screen關鍵字拿掉，就代表media type = all，而all的範圍除了涵蓋screen的範圍之外，還要再加上printer這個media type，所以實務上來說screen並非必要關鍵字。

@media only screen and (max-width: 850px) {
    
    p{
        border:solid;
        border-width:50px;
    }
}

所以一旦你把瀏覽器的寬度縮小到850px以下的時候，html中p的文字就會有超厚的border

先看看全螢幕(寬度1300px)的樣子

然後看看縮小到小於850px之後的樣子，整個樣子都跑掉了，哈哈，因為我亂設定css的關係XD

當然也可以限定瀏覽器的寬度介於一個區間的話，套用某某css

介於另一個區間的話，套用另外一個css，範例如下：

@media only screen and (max-width: 850px) {
    /*瀏覽器寬度小於850px的時候，會套用這個css*/
    /*框線會變成藍色*/
    p{
        border:solid;        
        border-width:20px;
        border-color:blue;
    }
}
@media screen and (min-width: 1100px) {
    /*瀏覽器寬度大於1100px的時候，會套用這個css*/
    /*框線恢復正常*/
    
    p{
        
    }
}

@media screen and (min-width: 850px) and (max-width: 1100px) {
    /*瀏覽器寬度介於850px~1100px的時候，會套用這個css*/
    /*框線會變成綠色*/
    p{
        border:solid;        
        border-width:20px;
        border-color:green;
    }
}

寬度小於850px的時候：