响应式网页设计

最新推荐文章于 2024-04-25 16:15:36 发布

Tertiary_grass

最新推荐文章于 2024-04-25 16:15:36 发布

阅读量395

点赞数

分类专栏： HTML & CSS 文章标签：响应式网站设计 html css Responsive

本文链接：https://blog.csdn.net/a1217158716/article/details/71159072

版权

HTML & CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们可以让现有的网站适应各种设备，而不是把不同设备的用户引向不同的页面。在电脑上打开一个网站，把浏览器拉小，页面内容会自适应窗口的大小。

1. 响应式网站设计(Responsive Web design)的理念是：

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

2. style元素的核心代码

body{
width:960px；
}
@media only screen and (min-width:758px) and (max-width:991px)
{
body{
width:700px;
}
}
@media only screen and (max-width:700px)
{
body{
width:500px;
}
}

上面的style表示当媒体屏幕改变时，网页会选择不同的style元素。

3. 自适应的图片

该图片添加以下style元素：img{max-width:100%}，注意不要在图片上设置它的长和宽，在CSS中输入上面的样式即可自适应屏幕了。

4.实例程序

<html>
<head>
<title>响应式网页设计</title>
<style type="text/css">
#tt{
width:400px;
height:400px;
background:red;
color:yellow;
font-size:25px;
text-align:center;
}
@media only screen and (min-width:701px) and (max-width:800px)
{
#tt{
width:300px;
height:300px;
background:blue;
color:red;
font-size:20px;
text-align:center;
}
}
@media only screen and (max-width:700px)
{
#tt{
width:200px;
height:200px;
background:yellow;
color:blue;
font-size:20px;
text-align:center;
}
}
</style>
<head>
<body>
<div id="tt">响应式网页设计</div>
</body>
</html>