问题的HTML版本：

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)

Noe我想看看它在不同设备上的样子。我正在$(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指令。我希望编辑器支持RESPONSIVE布局。我的意思是我希望最终用户能够实时看到我在移动设备中的样子。问题是。如何在指令中模拟移动设备？感谢＆＃39; S

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。

在更大的设备上预览css @media screen（max-width）

问题的HTML版本：

1 个答案: