使我的网站缩放到css中的分辨率大小 [英] making my site scale to resolution sizes in css

查看：101
本文介绍了使我的网站缩放到css中的分辨率大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我在CSS，HTML和PHP的第一个星期编程...我意识到当我开始我的网站，当我缩放我的网站的窗口大小，所有的文本将开始重叠，导致问题，看起来可怕。 / p>

我想知道我是否可以得到一个明确的答案，我做什么可怕的错误。我已经尝试过媒体查询等方法，但我还是不明白。



这是我的HTML ... 

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
 
< html xmlns =http://www.w3.org/1999/xhtmllang =en> 
  

 < head> 
< link rel =stylesheettype =text / csshref =style / style.css/> 
 
< title> replay.sc< / title> 
< meta http-equiv =content-typecontent =text / html; charset = iso-8859-1/> 
< style type =text / css> 
 
 
 a：link {color：gray; } 
 a：visited {color：gray; } 
 a：hover {color：white; } 
 a：active {color：grey; } 
 text-decoration：none;

}
} 

 < / style> 
 
 
< / head> 
 
< body font =sans-serifid =container> 
 
 
<！--- BEGIN：STICKY HEADER  - > 
< div id =header_container> 
< div id =header> 
< p>< a id =headertexta href =replay.sc> replay.sc< / a>< p> 
< / div> 
< / div> 
<！ -  END：STICKY HEADER  - > 
 
<！ -  BEGIN：Sticky Footer  - > 
< div id =footer_container> 
< div id =footer> 
 
< / div> 
< / div> 
<！ -  END：Sticky Footer  - > 
< div id =home_container> 
< h1 id =hometext>在此处上传您的重播，以生成包含下载链接和重播的各种信息的页面。 < / h1> 
< p id =hometext2>当页面生成时，您可以选择要向公众显示重播的哪些信息，如果您已登录，则将来可以对其进行编辑。< / p> 
 
< h1 id =hometext3>在此处上传重播包，以生成包含每个重放的下载链接或每个重放的.rar文件的页面。 < / h1> 
< p id =hometext4>只有每次重放的基本信息将被保存以节省服务器负载。 < / p> 
< / div> 
< / body>



> 

  / *重置body填充和边距* / 
 body {margin：0px; padding：0px; } 
 
 / *使头部粘性* / 
 #header_container {background：black; border：1px solid＃666; height：40px; left：0; position：fixed; width：100％; top：0; } 
 #header {line-height：5px; margin：10px; auto：width：940px; text-align：left;} 
 #headertext {
 font-family：sans-serif; 
 size：20px; 
 padding：2px; 
 font-size：120％; 
 text-decoration：none; 
} 
 
 / * CSS的页面内容。我给了顶部和底部填充80px，以确保页眉和页脚不重叠的内容。* / 
 #container {margin：auto; overflow：auto; padding：80px; width：100％; height：auto; } 
＃
 
 
 / * CSS主页内容* / 
 
 #hometext {
 font-family： arial; 
 padding：1px; $ b $ d font-size：100％; 
 text-decoration：none; 
 position：absolute; 
 top：5em; 
 left：4em; 
 color：＃585858; 
 margin-right：850px; 
} 
 
＃hometext2 {
 font-family：arial; 
 padding：10px; 
 font-size：80％; 
 text-decoration：none; 
 position：absolute; 
 top：7em; 
 left：4.24em; 
 color：＃585858; 
 margin-right：1200px; 
} 
 
＃hometext3 {
 font-family：arial; 
 padding：1px; 
 font-size：100％; 
 text-decoration：none; 
 position：absolute; 
 top：5m; 
 left：65em; 
 color：＃585858; 
 margin-right：0; 
} 
 
＃hometext4 {
 font-family：arial; 
 padding：18px; 
 font-size：80％; 
 text-decoration：none; 
 position：absolute; 
 top：10m; 
 left：80em; 
 color：＃585858; 
 margin-right：0; 
} 
 
 #home_container


解决方案

您不正确地混合相对和绝对测量。如果你是初学者，我建议先坚持使用一种测量模型，然后逐渐学习如何使用其他模型。



例如，Stack Overflow绝对定位;如果你调整浏览器窗口的大小，没有什么会调整大小。相对定位的网页可以使内容适应可用的窗口大小。 JSFiddle网站相对定位;它总是利用整个窗口大小。



两种测量模型都可以产生一个好的网站，但是为了产生一个成功的网站，你必须熟悉这两种方法



许多人认为绝对定位更容易为初学者呈现;虽然它有它的局限性，如果你想创建更高级的布局，适用于广泛不同的屏幕尺寸。



如果你想从绝对定位开始，你首先要决定整个页面的一定宽度。许多人使用相当窄的像素数量，它们具有大量的均匀分辨率，像960px或800px。要创建一个简单绝对定位的网站，您需要：


  1. 设置 position：absolute

  2. 设置以下任意两项：左，右或宽度

对于页面上的所有内容应使用相同的度量单位示例（在jsfiddle上编辑或全屏）：

  #hometext {
 font-family：arial; 
 font-size：100％; 
 text-decoration：none; 
 color：＃585858; 
 position：absolute; 
 top：80px; 
 left：60px; 
 width：335px; 
 height：60px; 
 line-height：20px; / *这确保3行文本总和为3 * 20px = 60px * / 
}

绝对定位的网站的缺点是明显的，如果你尝试缩放网站，或者如果你的用户使用不同的窗口大小（他们将有很多浪费的空间或水平滚动。



一个更现代的最佳实践是使用浮动定位来产生一个响应或弹性的网站，为此，你需要了解如何浮动要生成一个弹性网站，您需要：


  1. 对大多数事情使用百分比
    2. $明智地利用边距和填充
  2. 利用各种布局算法

例如（在jsfiddle 中编辑）或全屏）。理解各种布局算法可能是相当困难的，但如果你继续使用它为各种不同的布局，你最终会得到它。


This is my first week of programming in CSS, HTML and PHP... I realized when beginning my site that when i scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.

I was wondering if i could get a clear answer on what i am doing horribly wrong. I have tried methods such as media queries but i still don't understand it at all.

Here is my HTML... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">


  <head>
  <link rel="stylesheet" type="text/css" href="style/style.css" />

  <title>replay.sc</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">


a:link { color: grey; }
a:visited { color: grey; }
a:hover { color: white; }
a:active { color: grey; }
text-decoration: none;

} }

</style>


  </head>

  <body font="sans-serif"  id="container">


    <!--- BEGIN: STICKY HEADER -->
    <div id="header_container">
        <div id="header">
            <p><a  id="headertext"  a href="replay.sc"> replay.sc </a><p>
        </div>
    </div>
    <!-- END: STICKY HEADER -->

    <!-- BEGIN: Sticky Footer -->
    <div id="footer_container">
        <div id="footer">

        </div>
    </div>
    <!-- END: Sticky Footer -->
    <div id="home_container">
    <h1 id="hometext" > Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
        <p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>

    <h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
        <p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
    </div>
  </body>

and my CSS

/* Reset body padding and margins */
body { margin:0px; padding:0px; }

/* Make Header Sticky */
#header_container { background:black; border:1px solid #666; height:40px;left:0;position:fixed; width:100%; top:0; }
#header{ line-height:5px; margin:10px; auto:width:940px; text-align:left;}
#headertext { 
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%; 
text-decoration: none;
}

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container{ margin:auto; overflow:auto; padding:80px ; width:100%; height: auto; }
#content{
}

 /* CSS FOR HOME PAGE CONTENTS */

#hometext{
font-family: "arial";
padding: 1px;
font-size: 100%; 
text-decoration: none;
position: absolute;
top: 5em; 
left: 4em; 
color: #585858;
margin-right: 850px;
 }

#hometext2 {
font-family: "arial";
padding: 10px;
font-size:80%; 
text-decoration: none;
position: absolute;
top: 7em; 
left: 4.24em; 
color: #585858;
margin-right: 1200px; 
}

#hometext3 {
font-family: "arial";
padding: 1px;
font-size:100%; 
text-decoration: none;
position: absolute;
top: 5m; 
left: 65em; 
color: #585858;
margin-right: 0; 
}

#hometext4 {
font-family: "arial";
padding: 18px;
font-size:80%; 
text-decoration: none;
position: absolute;
top: 10m; 
left: 80em; 
color: #585858;
margin-right: 0; 
}

#home_container

解决方案

You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.

For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.

Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.

Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.

If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:

  1. Set position: absolute on most things.
  2. Set any two of: top, bottom, or height.
  3. Set any two of: left, right, or width.
  4. Everything on the page should use the same measurement unit (e.g. px)

For example (edit on jsfiddle or full screen):

#hometext{
    font-family: "arial";
    font-size: 100%; 
    text-decoration: none;
    color: #585858;
    position: absolute;
    top: 80px; 
    left: 60px; 
    width: 335px;
    height: 60px;
    line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}

The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.

A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:

  1. use percent unit for most things
  2. utilize the margins and paddings judiciously
  3. utilize the various layout algoritms

For example (edit in jsfiddle or fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.

这篇关于使我的网站缩放到css中的分辨率大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆