簡単な質問がありました。私の Web サイトは darthvixcustomsabers.com で、各 Web ページをモバイル デバイスで表示できるようにしようとしています。必ずしも見た目が違うわけではありませんが、携帯電話で表示できるだけです。
アスペクト比のメディア クエリを使用することを考えていましたが、よくわかりません。十分に簡単で可能であれば、このウェブサイトのようにしたい. 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>