响应式布局 技术的概念是伴随着CSS3的媒体查询技术的出现而产生的，现在已成为优秀页面布局的标准，是当今主流的设计。其中，Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。本人曾做过网页设计相关的工作深知响应式设计对于提升用户体验的重要性。不少朋友希望学习响应式布局技术却苦于没有办法找到合适的实例，我多年搜集了一套实用的HTML5响应式模板。涵盖各领域，可以直接修改 ，详情请看
响应式布局最简单的就是用css3来实现。我举一个最简单的例子。下面是html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width = device-width,initial-scale=1">
<title>index01</title>
<link href="style01.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading">第一</div>
<div class="container">
<div class="left">第二</div>
<div class="main">第三</div>
<div class="right">第四</div>
</div>
<div class="footing">第五</div>
</body>
</html>
下面是css3代码
*{
margin:0px
padding: 0px
}
.heading,
.container,
.footing{
margin: 10px auto
}
.heading{
height: 100px
background-color: red
}
.left,
.right,
.main{
height: 300px
background-color: yellow
}
.footing{
height: 100px
background-color: gray
}
<!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width:960px
}
.left,
.main,
.right{
float: left
height: 500px
}
.left,
.right{
width:200px
}
.main{
margin: 0px 5px
width:550px
}
.container{
height: 500px
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,
.container,
.footing{
width: 600px
}
.left,
.main{
float: left
height:400px
}
.right{
display: none
}
.left{
width: 160px
}
.main{
width: 435px
margin-left: 5px
}
.container{
height: 400px
}
}
@media screen and (max-width: 600px){
.heading,
.container,
.footing{
width: 400px
}
.left,
.right{
width: 400px
height: 100px
}
.main{
margin-top: 10px
width:400px
height:200px
}
.right{
margin-top: 10px
}
.container{
height: 420px
}
}
这样就可以实现简单的响应式布局！如果你想要了解的话，可以到华清远见学习一下。我就是在那里学习的。
HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：
1、响应式布局设计：
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
2、自适应网页设计：
自适应网页设计（AdaptiveWebDesign）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
扩展资料：
响应式布局与自适应布局的区别：
1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
参考资料来源：百度百科-响应式布局
参考资料来源：百度百科-自适应网页设计
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）