在更大的设备上预览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。