0

初めてのWeb サイトを作成したばかりですが、ブラウザ ウィンドウが小さすぎると、要素が奇妙に見え始めたり、まとまって見えたりすることに気付きました。要素をスケーラブルにする方法を考えていました

関連する HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Andrew Louis, University of Toronto</title>
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="javascript/jqueryscript.js"></script>
    <script src="javascript/popup.js"></script>
    <script language="JavaScript">
        var i = 0;

        imageObj = new Image();

        images = new Array();

        images[0] = "images/book-black.png";
        images[1] = "images/male-black.png";
        images[2] = "images/telephone-black.png";

        //Start preloading
        for (i = 0; i<=2; i++)
        {
            imageObj.src=images[i];
        }
    </script>
<body>

        <div id="heading"> 
            <span class="border">Andrew Louis</span>
            <div id = "subheading">
            <p> <br /><b>Andrew</b> is a big fan of grandiose ideas that propel change, imaginative software,<br /> innovative web design, and caffè americanos.</p>
            </div>
        </div>

        <!-- <div id="footer">      -->
            <div class="nav_wrapper">
                <ul class = "Fade" id="list_orientation">               
                    <li id="about"><a href="AboutMe.html"><img src = "images/male.png" height = '50' width = '50' /></a></li>
                    <li id="port"><a href="Portfolio.html"><img src = "images/book.png" height = '50' width = '50' /></a></li>
                    <li id="contact"><a href="Contact.html"><img src = "images/telephone.png" height = '50' width = '50' /></a></li>
                </ul> 


            </div>
        <!-- </div> -->



</body>
</html>

関連する CSS:

.Chunk{
    font-family:'ChunkFiveRomanRegular';
}

.Museo{
    font-family:'MuseoSlab500Regular';
    font-size:20px;
}


.nav_wrapper {
    position:fixed;
    color:#000;
    left: -100px;
    right: 0px;
    bottom: 0px;
    text-align:center;
    height:225px;
    /*background:white;
    border-style:dotted;*/
}

.global_nav{
    position:fixed;
    float:bottom;
    padding:5px;
    color:#000;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align:center;
    height:17px;
    font-size:10px;
    background:white;
}

#portfolio_text{
    text-align:center;
}

#heading{
    font-family:'Lobster1.3Regular';
    color:#D04D21;
    position: absolute;
    font-size:80px;
    top: 10%;
    left: 0px;
    width: 100%;
    height: 1px;
    text-align:center;
    text-shadow: 0 0 2px rgba(0,0,0,0.9);
}

.border{
    border-top: 1px solid #D04D21;/*#000000;*/
    border-bottom:1px solid #D04D21;/*#000000;*/
    padding:20px;
}

.rounded_border{
    border:2px dashed;
    padding:10px 40px; 
    border-radius:25px;
}

body{
background:#FFFFFF;
}

#subheading{
    font-family:'MuseoSlab500Regular';
    text-align:center;
    font-size:25px;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
}


#list_orientation li a {
    text-decoration:none;
    text-align:center;
    color:black;

}
#list_orientation li{
    display:inline-block;
    padding:50px;
    height:50px;width:50px;
    text-align:center;
    width:20%;
    margin-left:3%;
}


.Fade img{
    border-style:dotted;
    /*  opacity:0.4;
    padding:10px;
    padding-bottom:20px;*/
    background:white;
    border-color:#D04D21;


    padding: 2em 2em 2em 2em;
    -moz-border-radius: 5em;
    -webkit-border-radius: 5em;
    border-radius: 5em;
}

.Fade img:hover{
    background:#D04D21;
    border-color:white;
}

#pup {
  position:absolute;
  z-index:200; /* aaaalways on top*/
  text-align:center;
  font-family:'ChunkFiveRomanRegular';
  padding: 3px;
  margin-left: 10px;
  margin-top: -5px;
  width: 120px;
  border: 1px solid black;
  background-color:white;
  color: #D04D21;
  opacity:0.9;
  font-size: 1em;/*0.95em;*/
}

.Entypo{
    font-family:'EntypoRegular';
    font-size:100px;
}


a{
text-decoration:none;
color:#D04D21;
}
4

2 に答える 2

1

これは、作成する効果によって大きく異なります。

最も簡単な方法は、本文 (または新しい最上位の div) の最小高さと最小幅を設定し、ユーザーに小さなブラウザー ウィンドウでスクロールさせることです。

あなたが思いつくほとんどの解決策は、さまざまな要素のこれらの最小高さと最小幅をいじることを含むでしょう!

ただし、「より良い」解決策は、絶対または固定の位置を避けることです。これらはうまくスケーリングしません。代わりに、目的の効果を得るために、div でパディングとマージンを使用してみてください。

于 2012-06-25T21:01:34.903 に答える
1

css zoom および Firefox の同等のものを使用します。(-moz-transform:scale(xx))、jquery を使用

CSS ズームは、IE と Chrome の両方で機能します。

DOM がロードされた後、

var zoomRatio = $(window).width() / 1024; 
//if your site is fixed at 1024 px for example

$(document).ready(function(){

$(html).css("zoom",zoomRatio);

});

これはあまりサポートされていませんが、機能します。それが私が現在使用しているものです。

于 2012-06-25T21:11:17.730 に答える