根據屏幕分辨率更改圖像位置

我最近一直在學習響應式網頁設計。我想要實現的是在下面的圖片中展示的，其中一個是關於網站在桌面上的樣子，另一個是針對手機設備的樣子。如你所見，有四個盒子。點擊框後，在文本框中，您將看到一些指向該框的文本。我一直在想的是如何處理這種佈局。它只是媒體查詢和不同的CSS樣式取決於屏幕分辨率？或者我應該以某種方式（jQuery的？）切換DOM中的元素順序？我不知道如何處理這個。感謝您的任何建議！根據屏幕分辨率更改圖像位置

@media (max-width: 420px){ 
/* Your Code */ 
}

研究CSS

來源

2016-11-28 marc08

要@ D.Fraga的評論擴大的@media，CSS的@media規則：

來源

2016-11-29 00:11:17

這可以只用CSS來解決可以如下使用：

@media screen and (min-width: 480px) 
    /* css for large device */ 
    /*      */ 
} 


@media screen and (max-width: 480px) { 
    /* css for small device */ 
    /*      */ 
}

您有2套css，一套用於渲染較大的設備，另一套用於較小的設備。

您也可以考慮使用JavaScript screen.width帶有某種框架（即angularjs）根據屏幕大小來動態渲染DOM元素（雖然我高度推薦前者）。

來源

2016-11-28 23:48:25

If you properly follow these **media queries** for different screen view, 
may be your problem will be solved. 

/* 
    Media query for large devices like Laptops, Desktops 
    with screen size 1025px to 1280px 
*/ 

@media (min-width: 1025px) and (max-width: 1280px) { 

    //Your css here 

} 
/* 
    Media query for devices like Tablets, Mobiles (Landscape Layout) 
    with screen size 481px to 767px 
*/ 

@media (min-width: 481px) and (max-width: 767px) { 

    //Your css here 

} 

/* 
    Media query for smartphones mobiles (Portrait Layout) 
    with screen size 320px to 479px 
*/ 

@media (min-width: 320px) and (max-width: 480px) { 

    // Your css here 

}

來源

2017-06-20 06:55:24

根據屏幕分辨率更改圖像位置

回答

相關問題