如何让我的网站响应式？
Posted
技术标签:
【中文标题】如何让我的网站响应式？【英文标题】：How to make my website responsive? 【发布时间】：2018-05-31 03:49:21 【问题描述】：我正在为一个今天到期的学校项目开发一个网站，我已经尝试了一切似乎使它正确响应的方法，无论它没有正确调整大小。我一开始对编码并不了解，并且担心因为这很快就会到期。任何人都可以帮助我或指出正确的方向如何让它适用于移动设备和东西吗？提前致谢。
以下是CSS
body
font-family: arial;
font-size: 12px;
cursor: default;
color: #AAAAAA;
td
font-family: arial;
font-size: 12px;
cursor: default;
color: #242121
a
color: #000000;
text-decoration: none;
font-size: 16px
a:hover
color: #000000;
text-decoration: underline
input
border-width: 1;
font-family: arial;
font-size: 12px;
padding: 2px;
height: 21px;
border-color: #000000;
border-style: solid;
background-color: #ffffff;
color: #000000
.slogan
font-size: 14px;
color: #ffffff;
padding: 0 0 0 10;
.class1
font-size: 18px;
color: #ffffff;
font-family: Times;
以下是其中一个网页：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Litter of Love</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="style-2.css" />
<script>
Alert("Welcome to my web page!") ;
</script>
</head>
<body bgcolor="FFFFFF">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" background="header.jpg" valign="top" style="padding:0 0 0 10">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="slogan">
Build a Stylish Cat-Friendly Home
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" >
</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td colspan="3" bgcolor="CCCCCC"></td>
</tr>
<tr>
<td colspan="3" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="FFFFFF" valign="top">
<span style="font-size:6px"><br></span>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html">Home</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td><a href="contact.html">Contact us</a></td>
</tr>
<tr>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td><a href="about.html">About us</a></td>
</tr>
<tr>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td><a href="shop.html">Products</a></td>
</tr>
<tr>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td><a href="media.html">Media</a></td>
</tr>
</table>
<br><span style="font-size:6px"><br></span>
<span style="font-size:6px"><br></span>
</div>
</td>
<td bgcolor="CCCCCC"></td>
<td valign="top">
<span style="font-size:6px"><br></span>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" bgcolor="AAAAAA"></td>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td rowspan="2" colspan="2" bgcolor="#334a10" class="class1"> HEALTHY</td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0" ></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="FFFFFF">
<table border="0" cellpadding="17" cellspacing="0">
<tr>
<td style="color:999999;line-height:1.6em">
<div align="justify">
<img src="healthy.jpg" align="left">
Put together an engaging jungle gym for your cat friend and provide the gift of satisfaction and longevity.
<br><br>
Made by eco friendly materials and production recycled packaging.
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="FFFFFF"></td>
<td bgcolor="FFFFFF"></td>
<td bgcolor="F0F0F0"></td>
<td bgcolor="F0F0F0"></td>
<td bgcolor="F0F0F0"></td>
</tr>
</table>
<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" bgcolor="AAAAAA"></td>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td rowspan="2" colspan="2" bgcolor="#334a10" class="class1"> FUNCTIONAL
<td bgcolor="AAAAAA"></td>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0" ></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="FFFFFF">
<table border="0" cellpadding="17" cellspacing="0">
<tr>
<td style="color:999999;line-height:1.6em">
<div align="justify">
<img src="functional.jpg" align="right">
Captivating, durable and easy to relocate. Our cat furniture designs are a space conscious alternative to the traditional commercial cat tree.
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="FFFFFF"></td>
<td bgcolor="FFFFFF"></td>
<td bgcolor="F0F0F0"></td>
<td bgcolor="F0F0F0"></td>
<td bgcolor="F0F0F0"></td>
</tr>
</table>
<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" bgcolor="AAAAAA"></td>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td rowspan="2" colspan="2" bgcolor="#334a10" class="class1"> MODERN</td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="FFFFFF"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0" ></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="FFFFFF">
<table border="0" cellpadding="17" cellspacing="0">
<tr>
<td style="color:999999;line-height:1.6em">
<div align="justify">
<img src="beautiful.jpg" align="left">
We believe furniture should be noticed, but not draw too much attention. We design conceps which spark conversation in any home, and yet stand the test of time. We are thrilled to see cats coming out of the unnoticed rooms and into your modern living room.
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="AAAAAA"></td>
<td bgcolor="AAAAAA"></td>
<td bgcolor="F0F0F0"></td>
</tr>
<tr>
<td bgcolor="FFFFFF"></td>
<td bgcolor="FFFFFF"></td>
<td bgcolor="F0F0F0"></td>
<td bgcolor="F0F0F0"></td>
<td bgcolor="F0F0F0"></td>
</tr>
</table>
<span style="font-size:6px"><br></span>
</div>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td colspan="3" bgcolor="CCCCCC"></td>
</tr>
<tr>
<td colspan="3" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td colspan="3" bgcolor="FFFFFF" align="right">
Valco Copyright © 2017 All Rights Reserved
</td>
</tr>
</table>
</div>
</body>
</html>
【问题讨论】：
查看@media 查询
w3schools.com/css/css_rwd_mediaqueries.asp 参考这个
澄清一下，您想知道为什么在比 766 像素更窄的屏幕上会出现水平滚动条吗？
另外... tables 用于布局是 1990 年代的东西。
不要使用table, tr,td - 这对响应能力来说是一团糟。改用嵌套的div 元素，并为它们提供相对于其父容器的百分比宽度。使body 宽度为 100%。使用 CSS 媒体查询设置断点，其中元素从桌面布局（例如彼此相邻的 70/30% 宽度）切换到移动（100% 宽度）。 Alt：在 CSS 技巧上查找 flexbox。不要将字体大小和颜色放在 HTML 中 - 而是使用 CSS 来创建/应用类到各种 & 元素。尽早开始您的家庭作业，并在项目到期之前寻求帮助，但为时已晚。
【参考方案1】：
最快的方法是使用响应式 css 框架，并使用现有组件，如果需要，可以根据需要配置/设置样式。
我会推荐Bootstrap，您可以查看一些页面示例here。
对于侧面导航，您可以使用Navs > Pills (stacked)，每个右侧部分可以使用Panels > Panel with heading，在每个面板内您可以使用Media Object
这比使用 <table> 布局要好得多，就像您现在正在做的那样。
祝你好运！
【讨论】：
【参考方案2】：如果您只是想要一种“快速”的方式来使您的网站具有响应性。您应该查看媒体查询。
它们非常聪明，您可以直接在 CSS 中使用它们。
为台式机、平板电脑和移动设备制作一个，你应该很高兴:)
请看这里：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
【讨论】：
以上是关于如何让我的网站响应式？的主要内容，如果未能解决你的问题，请参考以下文章