在更大的設備上預覽CSS @Media屏幕（最大寬度）

Question

我想預覽特定的div在移動設備中的外觀。 我從外部來源獲得的div HTML。 例如：

var external_html='<div>Responsive div</div>' +
   '<style>@media screen(max-width:360) {{color:blue}}</style>')
var element=$(external_html)
.appendTo(document.body)

否，我想看看在不同設備上的外觀。 我正在做$(element).width(300) ，但它仍然顯示桌面版本。

換句話說，我正在搜索模擬CSS的屏幕尺寸，但僅模擬文檔中的一個元素。

請注意：我知道可以將external_html放在IFRAME中，但是我吃了IFRAMES）

---

問題的HTML版本：

<div style=width:250px>
   It's will be black
</div>
<div style=width:190px>
   I hope to see it blue. But it still black
</div>

<style>
div.preview (max-width:200px){
   // I am want this style to be applied to tje second div only
   color:blue
}
</style>

為什么？ 我正在使用Angular創建WYSIWYG指令。 我希望編輯器支持響應式布局。 我的意思是我希望最終用戶能夠實時看到我在移動設備中的樣子。 問題是。 如何在指令中模擬移動設備？ 謝謝

Answer 1

沒有答案...所以我必須自己解決。

JSFiddle： https ：//jsfiddle.net/khuj1ph5/2

我創建了一個名為addTo的函數：

function addTo(target,html,style,deviceWidth){

參數：

target -  that target DOM element
html   -  the html text, to append to the DOM
style  -  the CSS style, I would like to apply to the HTML
deviceWidth - the width of the device, I would like to see.

*如何運作？

它解析CSS，然后對mediaText進行更改，使其看起來像在原始設備中一樣。

適用於CSS響應式設計。

例如，這將僅顯示on_small消息：

var my_size=300
var external_html='<div class=on_big>On Big</div><div class=on_small>On small</div>'
var external_style=' .on_big,.on_small{display:none} @media   (min-width:500px) {.on_big{display:block;}} @media   (max-width:500px) {.on_small{display:block;}}'

addTo(document.body,external_html,external_style,my_size)

代碼： https ： //jsfiddle.net/khuj1ph5/2

用於測試：只需將my_size從300更改為600。