响应式布局的简单案例

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含响应式,布局等相关知识,佚名希望在学习及工作中可以帮助到您

响应式布局

响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局：

不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
　　p{
　　　　font-size: 12px;
　　}
　　header{
　　　　width: 100%;
　　}
　　header img{
　　　　width: 100%;
　　}
　　@media (min-width: 1300px) and (max-width:1400px) {
　　　　#left{
　　　　　　float: left;
　　　　　　width: 30%;
　　　　　　margin: 0px 50px;
　　　　}
　　　　#left #logo-bg{
　　　　　　margin: 10% 10%;
　　　　　　width: 80%;
　　　　　　position: relative;
　　　　}
　　　　#left #logo{
　　　　　　float: left;
　　　　　　width: 12%;
　　　　　　position: absolute;
　　　　　　left: 13%;
　　　　　　top: 230px;
　　　　}
　　　　#left p{
　　　　　　margin-bottom: -20px;
　　　　}
　　　　#left p,h4{
　　　　　　text-align: center;
　　　　　　color: red;
　　　　}
　　　　#right{
　　　　　　float: left;
　　　　　　width: 60%;
　　　　　　margin: 15% 0px;
　　　　}
　　　　#right h2{
　　　　　　text-align: center;
　　　　}
　　　　#right fieldset{
　　　　　　text-align: center;
　　　　　　border-left: none;
　　　　　　border-right: none;
　　　　　　border-bottom: none;
　　　　}
　　　　#right fieldset legend{
　　　　　　padding: 0px 20px;
　　　　}
　　　　#fen{
　　　　　　width: 100%;
　　　　　　-webkit-column-count: 6;
　　　　　　-moz-column-count: 6;
　　　　　　-o-column-count: 6;
　　　　　　-ms-column-count: 6;
　　　　　　column-count: 6;
　　　　　　-webkit-column-gap: 1em;
　　　　　　-moz-column-gap: 1em;
　　　　　　-o-column-gap: 1em;
　　　　　　-ms-column-gap: 1em;
　　　　　　column-gap: 1em;
　　　　}
　　　　#fen img{
　　　　　　width: 100%;
　　　　　　border-radius: 10px 10px 10px 10px;
　　　　}
　　　　#fen p,h4{
　　　　　　text-align: center;
　　　　　　color: red;
　　　　}
　　　　#fen p{
　　　　　　margin-bottom: -20px;
　　　　}
　　　　#di p{

您可能想查找下面的文章:

2017-08-06CSS3 border-image详解、应用及jQuery插件
2017-08-06使用css实现div垂直居中的示例
2017-08-06IE8 CSS hack
2017-08-06CSS3中的常用选择器使用示例整理
2017-08-06html css将表头固定的最直接的方法
2017-08-06Jacascript和CSS实现Mac OS导航菜单
2017-08-06css控制文本框宽度的方法
2017-08-06CSS 使用规则总结
2017-08-06css背景色透明内容不透明的解决方法(兼容所有浏览器)
2017-08-06几个Reset CSS的八卦问题

响应式布局的简单案例

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容