我有一个简短的问题，我的网站 darthvixcustomsabers.com，我正在尝试使我的每个网页都可以在我的移动设备上查看。不一定看起来不同，但只是可以在我的手机上查看。
我正在考虑使用纵横比媒体查询，但不太确定。如果足够简单和可能，我希望它像这个网站一样。http://www.fx-sabers.com/forum/
当您放大手机时，就像在桌面上查看一样，但您必须平移/缩放。
PS：我在那里发布了我的网站，所以我的代码应该可用，但如果不是，我会在这里发布。
这是我的代码
<!doctype html>
<html>
<head>
<title> DV Custom Sabers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
body {background-image:url('images/space1.jpg');
background-repeat: no-repeat center center;
background-position: center;
background-size: cover;
width: 100%;
min-height: 100%;
}
body
{color:white;}
a, a:visited {
color:#3399FF ; text-decoration:none;
}
div.saber {
column-count:2;
column-gap: 20px;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:150%;
}
div.logo {
margin-top:-50px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul { display: block; }
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
span.services {
font-size:250%;
text-decoration:underline;
margin-left:6%;
}
p.servicelist {
font-size:150%;
width:20em;
margin-left:3%;
padding:60px;
line-height:1.6em;
overflow: auto;
}
span.misc {
font-size:250%;
text-decoration:underline;
margin-left:6%;
}
ul.misccomps {
font-size:150%;
margin-left:8%;
}
span.blades {
font-size:250%;
text-decoration:underline;
margin-left:6%;
}
div.right {
float:right;
}
span.estimate {
font-size:250%;
text-decoration:underline;
margin-right:6%;
}
ul.cost {
font-size:150%;
margin-right:6;
text-align:left;
line-height:1.6em;
width:28em;
}
#cost {
font-size:150%;
margin-right:4%;
text-align:left;
line-height:1.6em;
width:28em;
}
span.conversions {
font-size:250%;
text-decoration:underline;
margin-right:6%;
}
span.onereplica {
font-size:200%;
text-decoration:underline;
margin-right:6%;
}
#parks {
font-size:150%;
margin-right:4%;
text-align:left;
line-height:1.6em;
width:28em;
}
span.korbanth {
font-size:200%;
text-decoration:underline;
margin-right:6%;
}
#MR {
font-size:150%;
margin-right:4%;
text-align:left;
line-height:1.6em;
width:28em;
}
span.MR {
font-size:200%;
text-decoration:underline;
margin-right:6%;
}
@media only screen
and (max-device-width : 480px) {
div.leftcol {
width:100%;
}
div.right {
width:100%;
}
}
</style>
</head>
<div class="header"><a href="index.html">Darthvix Custom Sabers</a></div>
<div class="header1">DV Custom Sabers is the place to go for your saber needs!</div>
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="schedule" height="200" width="350"></a></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="buildlog.html">Build Log</a></li>
</ul>
<div class="leftcol">
<span class="services"> Services </span> </div>
<div class="right">
<span class="estimate"> Estimated Cost of Custom Lightsaber</span>
<p> </p>
<ul class="cost">
<li class="fourth">A Stunt Custom saber with no shrouds or Powdercoating: $150-$350</li>
<li class="fourth">A Nano Biscotte™ powered custom saber with minimal shrouds and no Powdercoating: $400-$550</li>
<li class="fourth">A Petit Crouton™ powered custom saber with shrouds and Powdercoating: $600-$850</li>
<li class="fourth">A Crystal Focus™ powered custom saber with all the available features: $1200</li>
</ul>
<span class="conversions"> Lightsaber Conversions </span>
<p> </p>
<span class="onereplica"> One Replica Conversions </span>
<ul id="cost" >
<li class="misc1">Cost to install a Nano Biscotte™ Soundboard is $210 Plus cost of parts needed to convert the saber.</li>
<li class="misc1">Cost to install a Petit Crouton™ is $315 plus cost of parts needed to convert the saber.</li>
<li class="misc1">Cost to install a CFV5/6 is $300 plus cost of parts needed to convert the saber.</li>
</ul>
<span class="korbanth"> Korbanth/Parks Conversions </span>
<ul id="parks" >
<li class="parks">Please contact me directly if you would like a Parks or Korbanth Saber converted.</li>
</ul>
<span class="MR"> MR/Hasbro Conversions </span>
<ul id="MR" >
<li class="parks">To convert either a Master Replica or Hasbro FX Conversion with a Rebel/P4 LED $150.</li>
<li class="parks"> For Sound Upgrade and LED $250(not including parts cost).</li?
</ul>
</div>
<div class="leftcol">
<p class="servicelist"> All the sabers created are either designed by the customer or by Darthvix Custom Sabers.
The following prices listed for custom sabers are in no way meant to represent the actual final cost of your custom saber,
but to be an estimate.
Every saber I make has a unique design, the time it takes to complete the saber is based on the sabers complexity.
I will complete the saber as soon as possible, usually most sabers take 4-8 weeks, however sabers that require much
machining will take longer. Over half of the sabers I have sold are MHS, which are sabers made from pre-machined parts
from The Custom Saber Shop, and I modify the pieces to fit the customers design.
If you are looking for a accurate quote on your custom saber you are looking to have Darthvix Custom Sabers Create,
please email me a render of the saber you have in mind. This can include a 3-D renger, a hand drawn photo,
or a photoshopped image as well.
Please keep in mind, it may take a few days for me to figure the costs out based on your render because
I need to add up all the costs involved in creating your dream saber.</p>
<span class="misc"> Misc Component Install Cost </span>
<ul class="misccomps">
<li class="misc">Add Color Extender to Crystal Focus ™ V6 $60 Install Fee</li>
<li class="misc">Add Flash on Clash™ to Crystal Focus ™ or Petit Crouton™ $25 Install Fee</li>
<li class="misc">Add R.I.C.E. to Crystal Focus ™ or Petit Crouton™ $20 Install Fee</li>
<li class="misc">Calibration of Crystal Focus ™ or Petit Crouton™ $20 Install Fee</li>
<li class="misc">In-Hilt Recharge Port $20 Install Fee</li>
<li class="misc">Accent LED Install $10 Install Fee</li>
<li class="misc">Crystal Chamber/Pommel (only if possible on desired hilt) $55-75 Install Fee</li>
</ul>
<span class="blades"> Blade Services </span>
<ul class="misccomps">
<li class="misc">1Inch Transwhite Blade 32-36Inches$40+SH</li>
<li class="misc">7/8 Inch Blades 32-36Inches $45+SH</li>
</ul>
</div>
</div>
</html>
网站 http://www.fx-sabers.com/forum/正在为其网站使用某种响应式主题，为了做同样的事情，您还需要使用响应式样式。
有几种方法可以实现这一点，媒体查询肯定是其中之一，另一种方法是使用百分比调整所有div 等的大小并使用 em 作为文本。但是，我建议您使用媒体查询，因为它使您可以控制为每个特定屏幕尺寸指定宽度等，因此布局变得更加可控。
为了实现媒体查询，这不是在公园里散步，但从长远来看肯定是值得的。有很多关于这方面的信息，我相信找到资源将是容易的部分。许多人认为响应式是网页设计的方式，所以我会说去吧。您可能想查看免费的响应式主题以进行修改，甚至参考如何实现它。
祝你好运，愿力量与你同在。
标准媒体查询(由 Twitter 引导程序使用(
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
可能想添加
/* iPhone Portrait */
@media (max-width: 320px) { ... }
告诉网站缩小到 50% 等在这里无济于事。缩放需要应用于每个div/部分，而不是整个页面。我会做也许
div.leftcol {width:50%;}
div.right {width:50%;}
作为快速修复。或者做
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
div.leftcol{width:50%;}
div.right{width:50%;}
}
/* iPhone Portrait */
@media (max-width: 320px) {
div.leftcol{width:100%;}
div.right{width:100%;}
}
因此，它们在大屏幕上是平等的，在移动设备上是完整的