使用HTML和CSS调整你的网站以适应所有分辨率

分享于 

10分钟阅读

Web开发

  繁體

介绍

通过使用许多Web技术(例如Javascript,Css,Html),可以通过多种方式来实现此功能。

使用代码

最简单的方法之一是,网站使用百分比宽度,
.WebContainer{
 width: 100%;height: auto;}
.articles{
 width:90%;/*Takes 90% width from WebContainer*/height: auto;margin: auto;} 

但是这种方法效果不佳。如果用户从移动设备加载网站,它占用了屏幕的100%的宽度,这是非常小的空间。

另一种方法是给最小宽度加上百分比。
.WebContainer{
 width:100%;min-width:1000px;height:auto;} 

在上述情况下,网站仅将其网站降低到1000 px。

让我们看一下通过使用HTML和CSS中的一些很棒的东西来调整网站屏幕大小的有效方法。

浏览器缩小,使广告区域隐藏。

浏览器缩小。

FireFox

浏览器更加简化,以使图像和描述很好地对齐。

以上网站的设计布局为

需要做什么;首先看看HTML
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Test CSS3 HTML5</title><!--[if IE]>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <link href="IEStyleSheet.css" rel="stylesheet"/>
 <![endif]--><!--[if!IE]>--><linkhref="StyleSheet.css"rel="stylesheet"type="text/css"media="only screen"/><linkhref="MobileStyleSheet.css"rel="stylesheet"type="text/css"media="only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-device-pixel-ratio:1.5)"/><!-- <![endif]--><!--[if IEMobile]> 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <link href="MobileStyleSheet.css" rel="stylesheet"/>
 <![endif]--></head><body><divclass="Container"><header><span>Adjustable WebSite Example using HTML5 CSS3 </span></header><nav></nav><divclass="content"><sectionclass="main_articles"><articleclass="siteDescription"><divclass="desImage"><imgsrc="Images/css_image.jpg"/></div><divclass="des"> New web development technologies.
 </div></article></section><asideclass="side_article"><divclass="ads"> This is a Advertisement.
 </div><divclass="ads"> This is a Advertisement.
 </div></aside></div><footer></footer></div></body></html>

>标记有两个元素用于保存图像和一些文本,首先,设置web页面的布局。

body, html {
 margin: 0px;padding: 0px;background-color: #ededed;font-family: 'Trebuchet MS';}
.Container {
 width: 90%;min-width: 500px;margin: auto;}header {
 width: 100%;height: 120px;line-height: 120px;background-color: #313131;}
 headerspan {
 color: #fff;font-size: 30px;padding-left: 20px; }nav {
 width: 100%;height: 40px;background-color: #ff6a00;}
.content {
 width: 100%;height: 700px;padding: 10px 0px;background-color: #fff;}footer {
 width: 100%;height: 80px;background-color: #808080;margin-bottom: 20px;}
.main_articles {
 width: 70%;float: left;height: 650px;margin-left: 10px;}
.side_article {
 width: 25%;float: right;height: 600px;border-left: 1px dotted #6d6d6d;}
.siteDescription {
 display: -moz-box;/* Firefox*/display: -webkit-box;/* Chrome */display: -ms-flexbox;/* IE 10 */display: flexbox;flex-direction: row;flex-align:start;width: 95%;height: 150px;}
.desImage {
 -webkit-box-ordinal-group: 1;/* iOS 6-, Safari, Opera*/-moz-box-ordinal-group: 1;/* Firefox*/-ms-flex-order: 1;/* IE 10 */-webkit-order: 1;/* Chrome */flex-order: 1;width: 200px;height: 150px;}
. desImageimg {
 width: 200px;height: 150px;margin-left: 5px;border: 2px solid #6d6d6d; }
.des {
 margin-left: 15px;-webkit-box-ordinal-group: 2;/* iOS 6-, Safari, Opera*/-moz-box-ordinal-group: 2;/* Firefox*/-ms-flex-order: 2;/* IE 10 */-webkit-order: 2;/* Chrome */flex-order: 2;width: 70%;height: 140px;background-color: #e9e9e9;padding: 5px;}
.ads {
 width: 90%;margin: auto;margin-top: 10px;height: 150px;text-align: center;padding-top: 10px;background-color: #e5eff3;} 

首先,我删除了浏览器的默认页面margin和padding,设置background颜色和字体。

然后我设置主wrapper的宽度;wrapper所有页面元素的div,在此方案中,网页容器总是从浏览器宽度中取90%宽度,通过设置margin auto,它将元素与网页的中心对齐,接下来我设置header元素宽度为100%;现在,您必须确保它不会占用100%浏览器,而是占用Container div的100%宽度。设置高度为120 px,页脚,导航和内容与header相同,现在有点棘手,如何使main_articles <section>标记显示在左侧和side_articles <中aside>标签显示在右侧,可以通过使用表格来做到,其实很容易。但坦率地说,使用表格进行页面布局对齐有点过时,且难以维护。使用<div>或<section>总是更安全,main_articles将宽度设置为70%,,side_article内容宽度的25%,使其向右浮动。

使用float来调整元素现在也变得过时了,那么新的东西是什么?使用flexbox是新的趋势。它提高了可维护性。首先看一下我们用于显示文章描述和图像的布局。

开始,首先我们必须使包装<

  • 当屏幕达到900 px的宽度时,做一些修改;
@mediaalland(max-width: 900px) {
 .side_article { /* Hide advertisement panel*/display: none;visibility: hidden; }
. siteDescription {
 width: 100%;/* Earlier 70%*/ }
. main_articles {
 width: 90%;/* Earlier 95%*/ }}

然后,当屏幕达到700 px时,想做一些空间修改,实际上这并不重要,但在场景中,它看起来更清晰。

@mediaalland(max-width: 700px) {
 header {
 height: 90px; * Earlier 120px*/
 line-height: 90px; * Earlier 120px*/
 }
 headerspan {
 font-size: 20px;/* Earlier 30px*/ }
. des {
 width: 50%;/* Earlier 70%*/background-color: #e9e9e9; }}

这里我减少header的高度和字体大小一旦屏幕宽度700 px,并将description < div >的宽度减少到50%,使它看起来更对齐。

现在我做最大的section,做修改当屏幕高达500 px的宽度;想像这样显示页面

@mediaalland(max-width: 500px) {
 header {
 height: 70px;line-height: 70px; }
 headerspan {
 font-size: 16px; }
. side_article {
 display: none;visibility: hidden; }
. main_articles {
 width: 90%; }
. siteDescription {
 width: 95%;height: auto;display: block; }
. desImage {
 margin: auto;width: 90%;height: auto; }
. desImageimg {
 width: 95%;margin-left: 5px; }
. des {
 margin: auto;margin-top: 10px;width: 90%;height: 300px;background-color: #d9d9d9; }}

现在看看移动设备的样式。

苹果手机

安卓系统

Windows Phone (920 )

body, html {
 margin: 0px;padding: 0px;background-color: #ededed;font-family: 'Trebuchet MS';}@mediaonlyscreenand(max-device-width: 480px), onlyscreenand(-webkit-min-device-pixel-ratio: 2), screenand(-webkit-device-pixel-ratio:1.5){
 .Container {
 width: 90%;min-width: 480px;margin: auto; }
 header {
 width: 100%;height: 150px;line-height: 150px;background-color: #313131; }
 headerspan {
 color: #fff;font-size: 35px;padding-left: 20px; }
 nav {
 width: 100%;height: 70px;background-color: #ff6a00; }
. content {
 width: 100%;height: 900px;clear:both;padding: 10px 0px;background-color: #fff;font-size:35px; }
 footer {
 width: 100%;height: 80px;background-color: #808080;margin-bottom: 20px; }
. main_articles {
 width: 95%;float: left;height: auto;margin:auto; }
. side_article {
 display: none;visibility: hidden; }
. siteDescription {
 width: 95%;height: auto;display: block;margin:auto; }
. desImage {
 margin: auto;width: 100%;height: auto; }
. desImageimg {
 width: 100%;height: 100%;margin-left: 5px;border: 2px solid #6d6d6d; }
. des {
 margin: auto;margin-top: 10px;width: 100%;height: 300px;background-color: #d9d9d9;padding: 5px; }}

WEB  type  网站  类型