我想要預覽特定的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問題的版本：

回答

相關問題