2014-07-22 79 views
-1

如何在不使用插件的情況下製作移動WordPress網站?我是一名開發人員,但是對wordpress來說是新手。我有一個我喜歡的桌面版本,但它並不能在移動網站上正確顯示,並且鏈接被搞砸了。有什麼想法嗎?Mobile Wordpress Site without plugin

+0

CSS3媒體查詢 – DarkBee

+0

可能的重複[使用媒體查詢移動設計的最佳方法](http://stackoverflow.com/questions/7364109/best-way-to-use-media-queries-for-mobile-designs )。媒體查詢對Wordpress工作得很好。您可以根據自己的喜好包含儘可能多的樣式表,並且無需任何Wordpress技巧即可定位您的輸出HTML。 –

回答

0

正如評論所述,CSS Media查詢將允許您根據屏幕分辨率爲特定設備定義CSS規則。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
    /* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
    /* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    /* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
    /* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
    /* Styles */ 
} 

/* iPhone 4+ ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
} 

在/ *樣式* /塊中插入規則以修改您的網站以適合設備。