如何在移動模擬器中查看HTML網頁並提高代碼效率？

Question

 var Person= {}; Person.Character= function(firstName, lastName, gender, age) { this.FirstName= firstName; this.LastName= lastName; this.Gender= gender; this.Age= age; } Person.Character.prototype.GetAllInformation= function() { return this.FirstName + " " + this.LastName + " " + this.Gender + " " + + this.Age; } Person.Zack = new Person.Character("Zack", "Efron", "Male", 29); Person.Shia = new Person.Character("Shia", "Labeouf","Male", 30); document.getElementById("demo1").innerHTML = Person.Zack.GetAllInformation(); document.getElementById("demo2").innerHTML = Person.Shia.GetAllInformation();

 @media screen and (max-width: 320px) { #demo1{ width: 100px;} #demo2{ width: 100px;} } @media only screen and (orientation: portrait) { body { background-color: red; } }

 <html> <head> <meta name="viewport" content="width=device-width"> <title></title> <link rel="stylesheet" type="text/css" href="example-style.css"> </head> <body> <p id= "demo1"></p> <p id= "demo2"></p> <script src="script.js"></script> </body> </html>

大家好，

我已經創建了一個網頁並使用CSS來處理媒體查詢，因此，當我在移動模擬器上查看網頁時，當我減小屏幕的寬度或將屏幕變成縱向形式時，該網頁將變為活動狀態。因此，基本上，我想知道如何在模擬器上查看HTML頁面（該網站無法正常運行該頁面（ http://www.mobilephoneemulator.com/ ）），以及我是否在正確地進行媒體查詢？ 我知道到目前為止它們是正確的，但是有沒有辦法將兩個媒體查詢合並為一個媒體查詢？ 然后，這將減少我在CSS中擁有的代碼。 我已經附加了到目前為止我已經用HTML，CSS和JavaScript完成的代碼，供任何人查看。

Answer 1

如何在台式機上以移動方式查看您的網站：

鉻

只需轉到您的html頁面，然后按照以下步驟操作：

1. CTRL + SHIFT + J | Open Developer Console

2. CTRL + SHIFT + M (in Developer Console) | Mobile Device View 

3. Use the drop down to select your mobile screen you wish to preview in

Firefox （來源：Will）

1. Ctrl + Shift + M (Cmd + Opt + M for OS X)

Answer 2

您可以鏈接媒體查詢參數！

例如：

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    #demo1{ width: 100px;} 
    #demo2{ width: 100px;}
}

就您而言，您的媒體查詢為：

@media screen and (max-width: 320px) and (orientation: portrait)
{
    #demo1{ width: 100px;} 
    #demo2{ width: 100px;}
    body { background-color: red; }
}

@Robert I的答案包含測試響應式Web設計所需的所有信息-我不會將其重新發布。

如何在移動模擬器中查看HTML網頁並提高代碼效率？

問題描述

2 個解決方案

解決方案1
1 2017-03-28 22:32:28

解決方案2
1 已采納 2017-03-28 22:46:04

如何在移動模擬器中查看HTML網頁並提高代碼效率？

問題描述

2 個解決方案

解決方案1 1 2017-03-28 22:32:28

解決方案2 1 已采納 2017-03-28 22:46:04

解決方案1
1 2017-03-28 22:32:28

解決方案2
1 已采納 2017-03-28 22:46:04