我想要预览特定的div它在移动设备中的外观如何。我从外部来源获得的div HTML。例如：在较大的设备上预览css @media屏幕（最大宽度）

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，但我吃了iframe）发出

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布局。我的意思是我希望最终用户能够实时看到我在移动设备中的样子。问题是。如何在指令中模拟移动设备？谢谢

来源

2016-01-26 Aminadav

_“但仅限于文档中的一个元素“_--为什么，为了什么目的？你想调试的东西，或...？（顺便说一下，你的媒体查询示例是无效的，因为它缺少任何选择器。） – CBroe

这是用于最终用户还是本地调试？如果它是后者，那么最好使用浏览器开发控制台的CSS/HTML。 – litel

这是所见即所得编辑器为我的最终用户，它想要预览他们的东西 – Aminadav

没有答案......所以我必须自己解决它。

的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

来进行测试：刚刚从300 my_size更改为600

来源

2016-01-27 01:43:38 Aminadav

在较大的设备上预览css @media屏幕（最大宽度）

HTML问题的版本：

回答

相关问题