我已经在我的1920x1080监视器中为我的网站设计了响应性设计
我已经在我的1920x1080监视器中为我的网站设计了响应性设计
提问于 2014-05-11 17:54:32
就是我现在用Dreamweaver CS6设计的网站。
当我定位和对齐所有东西时，我基本上是在我的1920x1080分辨率中预览了所有带有Chrome的全屏，并且使用了大量的硬像素值，而不是用于div大小和图像大小的百分比，等等。但是现在，我很担心，并且非常肯定，如果你从一个更小的分辨率或更小的显示器上看它，整个页面会严重断裂吗？在Dreamweaver中的所有视图中，如桌面、平板和电话视图，一切都会因相互重叠而严重中断，等等。
现在，我将尝试回到过去，更灵活地把所有的事情都摆出来，用div和媒体查询等来包装东西，但是这有点让人难以抗拒。我该怎么开始？我需要使用流体网格布局吗？也许，如果我用流体网格布局启动一个新项目并复制所有内容，会更容易吗？
现在，我的攻击计划就是把这个索引html分成3个div(左上角一个，右上一个，主内容一个)，然后从那里开始。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Terry Bu - Portfolio Website</title>
<link href="_css/main.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="_css/mquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_javascript/sound-mouseover.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
</head>
<body>
<div id="kyoto_image">
<img class="bottom" src="_images/kyoto_crossfade.jpg" width="350" height="450">
<img class="top" src="_images/kyoto.jpg" width="350" height="450">
</div>
<div id="logo">
<img class="bottom" src="_images/logo_remake_crossfade.jpg" width="290" height="140">
<img class="top" src="_images/logo_remake_nocross.jpg" width="290" height="140">
</div>
<div id="hello">
<p>Hi, I'm Terry Bu, an aspiring web/app developer & programmer residing in Astoria, NY. </p>
<p>Thank you for visiting. <em>Dreamweaver CS6 was used for the design of this website. </em></p>
</div>
<nav>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">PORTFOLIO</a>
<ul>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="android.html">Android</a></li>
<li><a href="java.html">Java</a></li>
<li><a href="ruby.html">Ruby on Rails</a></li>
</ul>
</li>
<li><a href="http://terrybu.blogspot.com" target="blank">BLOG</a> </li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="misc.html">MISC.</a></li>
</ul>
</nav>
<div id="connect" class="rotate">
<span class="sns">got Social? </span>
<a href="http://www.facebook.com/schooloftruth" target="_blank"><img src="_images/icon_facebook.png" width="45" height="45" alt="terry fb"></a><a href="http://www.linkedin.com/in/terrybu" target="_blank"><img src="_images/icon_linked.png" width="45" height="45" alt="terry linkedin"></a><a href="http://www.quora.com/Terry-Bu" target="_blank"><img src="_images/icon_quora.png" width="45" height="45" alt="terry quora"></a><a href="https://twitter.com/burownrice/" target="_blank"><img src="_images/icon_twitter.png" width="45" height="45" alt="terry twitter"></a>
</div>
</div>
<div class="contentDiv">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel1.open(); return false; " >TECHNOLOGY</div>
<!--onmouseout="CollapsiblePanel1.close(); return false;"-->
<div class="CollapsiblePanelContent">
<p>As impressed as we already are with the fast advancement of technology, with inventions like Google, Facebook, Twitter and smartphones changing world culture, I believe we have only scratched the surface. </p>
<p>Technology will continue to be the glue that binds information and knowledge across all areas including education, science, public health, government, and private sector.</p>
<p>There is little doubt that the world's need for engineers, developers and programmers will continue to rise exponentially within the next several decades.</p>
<br>
</div>
</div>
<div id="yourchoice">Click, Hover, Your Choice</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel2.open(); return false;" >EDUCATION</div>
<div class="CollapsiblePanelContent"><p>I am self-taught in front-end web design (HTML,CSS, Dreamweaver) and in the basics of Java, Eclipse (Android App Development), Ruby and Python.</p>
<p>I graduated with a B.S. in Business Administration with a minor in Japanese from UNC - Chapel Hill. </p>
I am still in the process of teaching myself JavaScript, Ruby on Rails, PHP, MySQL and other skills necessary to build a powerful, functioning web application.
<br>
<br>
</div>
</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel" >
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel3.open(); return false;">Work Experience</div>
<div class="CollapsiblePanelContent">
<p>I come from a background in marketing and sales. I've always had an interest and passion for studying technology, and recently made the commitment to switch fully into the world of computer programming and web development in early 2014. </p>
<p>As for my technical work experience, I worked as a B2B Account Executive in the IT solutions industry, working closely with Cisco networking. I also have experience working as an Online Community Manager for a small business.</p>
<p>Please refer to <a href="http://www.linkedin.com/in/terrybu" target="_blank">http://www.linkedin.com/in/terrybu</a> for more detailed information on my work experience.</p>
<br>
</div>
</div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel4.open(); return false;">Vision</div>
<div class="CollapsiblePanelContent">
<p>Emerging resources available for self-education have allowed many people including myself to pursue new careers in technology. To give back to the people who made this possible, I want to help create free, high-quality self-education resources for people all over the world, following examples like Khan Academy. To ensure steady progress in future of society, I believe more knowledge should be free and accessible.</p>
<p>I also hope to gain enough expertise in coding so that I can impact a variety of different areas like public health, science, local government, education and nonprofit through channels like Github and Code for America. </p>
<br>
</div>
</div>
</div>
<div id="leftharsh">
<img src="_images/leftharsh.png" width="37" height="30">
</div>
<div id="leftarrow"><img src="_images/left-diag.png" width="37" height="30"></div>
<div id="rightarrow">
<img src="_images/right-diag.png" width="37" height="30">
</div>
<div id="rightharsh">
<img src="_images/rightharsh.png" width="37" height="30">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
</script>
<audio>
<source src="_sound/click.mp3"></source>
<source src="_sound/click.ogg"></source>
</audio>
<div id="sounddiv"><bgsound id="sound"></div>
<script type="text/javascript">
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
</script>
</div>
</body>
</html>
@charset "utf-8";
@import url("../webfonts/gotmilk/stylesheet.css");
/*#wrapper{
width:90%;
margin:20px auto;
max-width:960px;
}*/
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
content:"";
background: rgba(0,0,0,.7);
position:fixed;
display:block;
z-index:5;
}
/* ...and position them! */
html:before{
height:10px;
left:0;
right:0;
top:0;
}
html:after{
width:10px;
top:0;
right:0;
bottom:0;
}
body:before{
height:10px;
right:0;
bottom:0;
left:0;
}
body:after{
width:10px;
top:0;
bottom:0;
left:0;
}
#yourchoice {
position: absolute;
left: 45%;
top: 50%;
margin-top: 20px;
max-width: 300px;
max-height: 24px;
z-index: 7;
font-family: gotmilk;
font-size: 36px;
}
.rotate img {
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
h1 {
font-family: gotmilk;
font-size: 50px;
color: rgba(0,0,0,1);
}
#connect{
position: absolute;
top: 10px;
right: 5px;
width: 330px;
z-index: 6;
}
span.sns{
font-family: gotmilk;
font-size: 48px;
}
#android_images {
position: absolute;
top: 15px;
left: 20%;
float: right;
}
#android_images img{
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#android_images img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
}
#kyoto_image {
position: absolute;
top: 15px;
left: 25%;
float: right;
}
#kyoto_image img {
position: absolute;
left: -46px;
border-width: 5px;
border-style: solid;
border-color: rgba(0,0,0,1);
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
top: 31px;
}
#kyoto_image img.top:hover {
opacity:0;
}
#logo {
position: absolute;
left: 60%;
top: -5px;
width: 282px;
height: 134px;
z-index: 1;
}
#logo img {
position: absolute;
left:0;
top: 60px;
width: 282px;
height: 134px;
z-index: 1;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#logo img.top:hover {
opacity:0;
}
#hello {
position: relative;
top: 185px;
left: 50%;
margin-left: 30px;
width: 700px;
height: 102px;
z-index: 3;
text-align: left;
text-shadow: 1px 1px 10px rgba(0,0,0,0.4);
font-size: 19px;
}
nav {
position: relative;
left: 48%;
top: 187px;
width: 800px;
height: 39px;
z-index: 2;
background-color: #FFFFFF;
text-align: right;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgba(102,102,102,1);
}
#technology {
position: absolute;
top: 542px;
left: 276px;
width: 411px;
max-height: 65px;
z-index: 5;
overflow: hidden;
-webkit-transition: max-height .5s ease;
-moz-transition: max-height .5s ease;
-ms-transition: max-height .5s ease;
-o-transition: max-height .5s ease;
transition: max-height .5s ease;
}
#education {
position: absolute;
top: 545px;
right: 300px;
width: 411px;
max-height: 400px;
z-index: 5;
}
#career {
position: absolute;
left: 902px;
top: 912px;
width: 752px;
max-height: 400px;
z-index: 5;
background-color: rgba(153,153,153,.5);
border-radius: 0px 30px 0px 30px;
}
#vision {
position: absolute;
left: 124px;
top: 1189px;
width: 584px;
max-height: 400px;
z-index: 6;
}
#video {
position: absolute;
top: 55%;
left: 30%;
overflow-style: auto;
overflow: hidden;
width: 600px;
}
#mapCanvas {
position: absolute;
top: 55%;
left: 30%;
border: 1px solid rgba(0,0,0,1);
}
#contactTerry{
position: absolute;
left: 50%;
margin-left: 50px;
top: 51%;
margin-top: 25px;
font-family: "MS Serif", "New York", serif;
font-size: 36px;
font-style: normal;
font-weight: bolder;
text-shadow: 2px 2px 2px rgba(214,214,214,1);
overflow: hidden;
width: 870px;
}
#js1 {
position: relative;
top: 350px;
margin-left: 35%;
width: 800px;
background: rgba(0,0,0,1);
text-align: left;
overflow: hidden;
margin-bottom:: -5px;
}
#gaptext {
position: relative;
top: 315px;
margin-left: 50%;
margin-top: 50px;
margin-bottom: -70px;
font-weight: bold;
font-size: large;
}
#js2 {
margin-top: -5px;
position: relative;
top: 400px;
margin-left: 35%;
width: 800px;
height: 600px;
background: rgba(0,0,0,1);
border: rgba(0,0,0,1), solid, 2px;
}
#codeAcademy{
color: rgba(255,255,255,1);
text-align: center;
padding: 10px;
overflow: hidden;
}
#sun {
position: absolute;
/* Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;
border-color: red;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 222px red;
/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#earth {
position: absolute;
top: 0%;
left: 25%;
/* Style your earth */
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
#earth-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 1px;
border-style: dotted;
border-color: white;
border-radius: 80%;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#apDiv1 {
position: absolute;
left: 46%;
top: 510px;
width: 196px;
height: 24px;
z-index: 7;
}
#leftharsh {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 20%;
top: 517px;
}
#leftarrow {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 40%;
top: 517px;
}
#rightarrow {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 60%;
top: 517px;
}
#rightharsh {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 80%;
top: 517px;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-11 18:17:28
我强烈建议重新开始。看起来你做这个网站是为了学习，所以重做这个网站，让它更有响应性，这将是一个更有价值的学习经验，而不是试图强迫适应现有的设计。
我通常发现，要将非平凡的布局设计从固定宽度的设计转变为响应性的设计，要比从一开始就开始写白纸和思考响应性要困难得多；对于初学者来说，如果你尝试开始将固定宽度的布局转换为流体布局，你可能会不断地调整属性，而不知道为什么会这样，但却发现两者都不起作用，这会阻碍您的学习。
Stack Overflow用户
发布于 2014-05-11 23:29:30
我的建议，就像李瑞恩说的，是重新开始。我知道，在你已经做了这么多工作之后，这听起来很糟糕，但相信我--试图调整一个糟糕的基础最终会导致越来越多不必要的复杂性，到了最后，你会更加不知所措，被一个摇摇欲坠的网站困住，这个网站看上去还不错，但<h1>中有太多的角色，整件事就会分崩离析。
我把这种情况比作设计房间。你开始设置所有的东西，然后你意识到床的位置不适合你的桌子，你记得你想要一架钢琴在这里的某处，你需要一个地方做你的瑜伽，你不能够到墙上的干燥擦除板，因为梳妆台在路上，等等等等。
第一个选择是进去，开始移动东西；把钢琴拿进来，把它挤进去，把你的瑜伽垫放下，让你知道它需要多大的空间，试着在它周围工作，为干燥的擦除板带来一个画架，这样它就不会在梳妆台后面了。换句话说，试图破解设计来处理你已经拥有的东西。但现在房间太乱了，你几乎动不动。
备选方案二是重新开始。把所有的东西都带出房间，直到它空空如也。现在你可以看看空荡荡的房间，然后看看所有要进去的东西，想出一个更好的设计，同时考虑到你第一次忽略的所有东西。一次只带一件东西比试图清理一个杂乱的空间容易得多。
你的网站也是如此。重新开始。再次设计它，这一次知道你在第1版中学到的所有东西--我保证，你的代码会更干净，你的站点会看起来更好，功能也会更好，未来的维护/更新也会更容易。
当你重新开始你的设计时，从尽可能小的屏幕开始。调整您的浏览器窗口到320 px，并使您的网站看起来像这样。然后展开窗口，直到站点崩溃--添加一个断点并将其设计为正确。然后再展开，直到站点崩溃。然后添加一个断点并设计它。一直往前走，直到你有了一个完全响应的设计。
我最近读了一篇叫做7.高效媒体查询的习惯的文章。在这篇文章中，作者引用了Stephen Hay的话，我认为他总结了一个很好的响应性设计，并强调了它实际上是多么简单：
“先从小屏幕开始，然后展开，直到它看起来像狗屎一样。是断点的时候了！”- Stephen
最后的想法:尝试使用和学习尽可能多的直接CSS。WYSIWYG编辑器很好，而且方便，但是如果您知道代码，您将得到更好的服务。
Stack Overflow用户
发布于 2014-05-12 13:21:29
你最好重新开始。假设你是一名建筑师，你知道你想要在你正在建造的房子里滑动墙，但你首先要用固定的墙建造房子。这有多不对？这就是我在正常大小的显示器上看到你的网站的方式：http://prntscr.com/3iirfk
建立一个响应的网站不是你放在一个固定宽度的网站之上的东西。这是你开始你的项目的东西。
从流体网格开始，在设计“裂缝”时添加断点，并阅读大量文章和最佳实践，以便响应when设计。
我建议你读这家伙写的所有东西：http://bradfrostweb.com/
祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23596011
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号