0

我有一个简单的问题，我的网站是 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>
4

1 回答 1

0

网站 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/section 而不是整个页面。我可能会做

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%;} 
}

所以他们在大屏幕上是平等的，在手机上是完整的

于 2013-09-30T14:11:22.490 回答