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 （信用：会）

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我的答案包含了测试响应式网页设计所需的所有信息 - 我不会重新发布它。

如何在移动模拟器中查看我的HTML网页并提高我的代码效率？

2 个答案: