个人中心
gpt4 book ai didi

css - 如何让我的网站在屏幕分辨率改变时自动调整大小？

转载 作者：行者123 更新时间：2023-12-04 21:54:01 31 4
gpt4 key购买 nike

当我以非 1920x1080 的分辨率使用我的网站时，它会放大，所以我必须左右滚动才能查看全部内容。如何使网站调整大小以适应分辨率并正确显示。

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Fri, 24 Oct 2014 20:29:09 GMT">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="The villages of East and West Runton are situated between Sheringham and Cromer on the North Norfolk Coast, UK">
    <meta name="keywords" content="East Runton, West Runton, Sheringham, Cromer, North Norfolk Coast,UK, Village, England, Parish Council">
    <title>Home</title>
 <style>

body {
width: auto;
min-width: 10240px;
height:100%;
margin-left: 0 auto;
margin-right: 0  auto;
display: block;
}
</style>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 <style> 
 

#cssmenu {
  background: #f96e5b;
  width: 1404px;
  margin-right:auto;
  margin-left:auto;
  padding:0;
}
#cssmenu ul {
  list-style: none;
  margin: 0%;
  padding: 0%;
  line-height: 1;
  display: block;
  zoom: 1;
  width:100%
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0%;
  height: 0%;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0%;
  margin: 0%;
}
#cssmenu.align-right ul li {
  float: right;
  
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #000000 ;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 100%) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}
</style>

<style>


.heading1 {
width:1400px;
height:120px;
margin-right:auto;
margin-left:auto;
padding:0;
border: 4px solid #fb998c;
}


 #box1 {
width:1400px;
height:1000px;
margin-right:auto;
margin-left:auto;
padding:0;
border: 4px solid #fb998c;
}

ul > li
{ 
  display:block;
  position:relative;
  height:30px;
}

ul > li .flyout_container
{
  position:absolute;
  top:30px; /* this is the LI's height*/
  left:0;
  display:none;
}

ul > li:hover .flyout_container
{
  display:block;
}



    #east_runton{ /* The following CSS rules are optional. */
	 position: relative;
	 overflow:hidden;
	 height:120px; 	 
	 margin-left:auto;
	 margin-right:auto;
	 float:left;
    }   
  
 

    #west_runton{ /* The following CSS rules are optional. */
	 position: relative;
	 overflow:hidden;
	 height:120px; 	 
	 margin-left:auto;
	 margin-right:auto;
	 float:right;
	 margin-top: -101.51px;
	}
	
	#title {margin-right: 160px; 
	margin-top: 2.5%;}
   
   
   #menubar2 {
   width:400px;
   margin-left:auto; 
   margin-right:auto;
   }
   
   #subheading { font-size: 130%;
   font-weight:bold;}
   
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
   
   #marqueetext {
	   padding-top: 45px;
   }
   
   #marqueeimage {
	   float: left;
   }
   
   #text2 {
	   padding-left:20px;
	   padding-right:20px;
   }
   
   #imgright {
	   float:right;
   }
   
   #imgleft {
	   float:left;
	   padding-right: 5px;
	   padding-top: 2px;
   }
   </style>


    
  </head>
  
  <body> 
	<div class="heading1">
	
	       <div id="east_runton">
    <img src="images/east_runton/1.jpg" height="120" alt="Slide 1" />
    <img src="images/east_runton/2.jpg" height="120" alt="Slide 2" />
    <img src="images/east_runton/3.jpg" height="120" alt="Slide 3" />    
    <img src="images/east_runton/4.jpg" height="120" alt="Slide 4" />
           </div>  
  <script src="slideShow.js"></script>
  
  <div id="title">
  <br /><div style="margin-top: -100px" "margin-right: 40px"> <h1 id="heading" align="center"><font color="black"><font face="Century Gothic"><font size="10"><br />East and West Runton<br /> </font size></font color></h1> 
    <p id="subheading" align="center"><font face="Century Gothic"><b>Welcome to East and West Runton's parish web site. East and West Runton are villages in North Norfolk.</b></p> </div> </font face>
     </div>       
		   <div id="west_runton">
    <img src="images/west_runton/1.jpg" height="120" alt="Slide 1" />
    <img src="images/west_runton/2.jpg" height="120" alt="Slide 2" />
    <img src="images/west_runton/3.jpg" height="120" alt="Slide 3" />    
    <img src="images/west_runton/4.jpg" height="120" alt="Slide 4" />
           </div>  
  <script src="slideShow2.js"></script>
   
    </div>
 
   
  
<br />
<div id='cssmenu'>
<ul>
  <li class='active'>
  <li><a href="index.html">Home</a></li>
  <li><a href="parish_council_information.html">Parish Council information</a>
      <div class="flyout_container">
      <ul>
        <li><a href="somepage_subpage">Parish council minutes</a>
      </ul>
      <ul>
        <li><a href="somepage_subpage">Agenda</a>
      </ul>
      <ul>
        <li><a href="somepage_subpage">Annual report</a>
      </ul>
      <ul>
        <li><a href="somepage_subpage">Publication scheme</a>
      </ul>
    </div>
  <li><a href="whats_on.html">What's on </a></li>
  <li><a href="history.html">History</a></li>
  <li><a href="churches.html">Churches</a></li>
  <li><a href="churches.html">Newsletter</a></li>
  <li><a href="villiage_halls_and_social_clubs.html">Village Halls and Social Clubs</a></li>
  <li><a href="gallery.html">Gallery</a></li>  
  <div id="menubar2">
  <li><a href="business_in_runtons.html">Business in Runtons</a></li>
  <li><a href="contact_us.html">Contact us</a></li>
 </div>
</ul> 
</div>

<br />


<div id="box1"><font face="Century Gothic"><font size="+1">
<marquee><img id="marqueeimage" src="images/quality_parish_council.jpg"><div id="marqueetext">Provided by Runton Parish Council - Proud to be a Quality Council</div></marquee>

<br /><br />
<div id="text2"> <font size="+2">
<img src="images/countrywalks.jpg" alt="Country Walks, North Norfolk, UK" id="imgright" WIDTH="300" HEIGHT="225"><p>The
    villages of East and West Runton are situated between Sheringham and Cromer one mile apart
    on the North Norfolk Coast. With quiet unspoilt beaches, miles of footpaths, bridleways
    and commons with benches to relax on.</p>
    <p>There are car parks in both villages. In East Runton situated on the cliff top at Beach
    Road the car park is a &#147;Pay and Display&#148;.</p>
    <p>At West Runton situated on the A149 at the east end of the village, the car park is
    provided by the Parish Council and is free. There is also parking at the cliff top which
    carries a small charge.</p>
    <br />
    
  <p><img src="images/westruntonbeach.jpg" alt="West Runton Beach, North Norfolk, UK" id="imgleft" WIDTH="300" HEIGHT="225">There are large friendly caravan sites in both villages and ample camping facilities.</p><p>The villages have a good variety of thriving shops from which fresh
    produce is available, including camping equipment and outdoor clothing shops, butchers and
    family-run small supermarkets. Post office at West Runton.</p>
    <p>East Runton boasts two public houses, a club and restaurants and a sports ground. At
    West Runton, there is a public house and a large hotel with a nine-hole golf course, a
    beach café and a restaurant in the village street. Buses are frequent through both
    villages and there is a railway station at West Runton.<br>
    </p>
</div></font size>

    </div>
   </div>
  </div>
 </body>
</html>

非常感谢您提供的任何帮助:)

最佳答案

使用百分比是创建响应式网页的一种方法，但更好的方法是使用媒体查询。

看看 CSS3 media queries .

它们正是您所需要的。您需要做的就是根据您的情况为每个媒体查询指定一些最大或最小屏幕尺寸。这样，您就可以设计您的网站在移动设备、平板电脑、计算机等设备上的外观，而且它们不必完全相同!

在像计算机这样的大屏幕上看起来不错的东西在移动设备上不一定很好看，但是使用媒体查询，您可以为两种设备设计单独的版本!

例如，您使用 min-width

仅为台式机执行一些 CSS 
@media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
    body {
        background-color: yellow;
    }
}

这样一来，您的网页在台式机上和在移动设备和平板电脑上看起来就不同了。

另请参阅 this很棒的链接。

关于css - 如何让我的网站在屏幕分辨率改变时自动调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28262385/

31 4 0
文章推荐： ide - MonoDevelop 完整支架关闭
文章推荐： 正则表达式:如何只允许大于零的整数
文章推荐： function - Scala 函数获取所有大小为 k 的排序子集
文章推荐： 使用 Windows Identity Foundation 的 WCF 身份验证和授权
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com