-1
如何在不使用插件的情況下製作移動WordPress網站?我是一名開發人員,但是對wordpress來說是新手。我有一個我喜歡的桌面版本,但它並不能在移動網站上正確顯示,並且鏈接被搞砸了。有什麼想法嗎?Mobile Wordpress Site without plugin
如何在不使用插件的情況下製作移動WordPress網站?我是一名開發人員,但是對wordpress來說是新手。我有一個我喜歡的桌面版本,但它並不能在移動網站上正確顯示,並且鏈接被搞砸了。有什麼想法嗎?Mobile Wordpress Site without plugin
正如評論所述,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 */
}
在/ *樣式* /塊中插入規則以修改您的網站以適合設備。
CSS3媒體查詢 – DarkBee
可能的重複[使用媒體查詢移動設計的最佳方法](http://stackoverflow.com/questions/7364109/best-way-to-use-media-queries-for-mobile-designs )。媒體查詢對Wordpress工作得很好。您可以根據自己的喜好包含儘可能多的樣式表,並且無需任何Wordpress技巧即可定位您的輸出HTML。 –