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 编写的代码，以供任何人查看。
最佳答案
您可以链接媒体查询参数!
例如:
/* 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 的回答包含测试响应式网页设计所需的所有信息 - 我不会重新发布它。
关于javascript - 如何在移动模拟器中查看我的 HTML 网页并使我的代码更高效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43081091/