2002年做网站多少钱,福田住房和建设局网站,南通优化网站收费标准,网站建设项目实施方案CSS 响应式布局也称自适应布局#xff0c;是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念#xff0c;简单来讲就是一个网站能够兼容多个不同的终端#xff08;设备#xff09;#xff0c;而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。…CSS 响应式布局也称自适应布局是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念简单来讲就是一个网站能够兼容多个不同的终端设备而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验而且随着大屏智能手机的普及用“大势所趋”来形容也不为过。
要实现响应式布局常用的方式有以下几种
使用 CSS 中的媒体查询最简单使用 JavaScript使用成本比较高使用第三方开源框架例如 bootstrap可以很好的支持各种浏览器。
接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
设置 meta 标签
首先我们需要设置 meta 标签来告诉浏览器让视口网页的可视区域的宽度等于设备的宽度并禁止用户对页面的缩放如下所示 在设置视口时需要注意视口就是网页可见区域的尺寸设置视口时只设置宽度就行不用在乎高度具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下
viewport即视口表示网页的可视区域width控制 viewport 的大小可以指定一个具体的值例如 600也可以是由关键字组成的特殊值例如 device-width 就表示设备的宽度initial-scale表示初始缩放比例也就是页面第一次加载时的缩放比例maximum-scale表示允许用户缩放的最大比例范围从 0 到 10.0minimum-scale表示允许用户缩放到最小比例范围从 0 到 10.0user-scalable表示用户是否可以手动缩放“yes”表示允许缩放“no”表示禁止缩放。
媒体查询
CSS 媒体查询可以根据指定的条件针对不同的媒体类型screen print定义不同的 CSS 样式让使用不同设备的用户都能得到最佳的体验。
关于媒体查询有以下三种实现方式
1、直接在 CSS 文件中使用示例代码如下
media (max-width: 320px) {/*0~320*/body {background: pink;}}media (min-width: 321px) and (max-width: 375px) {/*321~768*/body {background: red;}}media (min-width: 376px) and (max-width: 425px) {/*376~425*/body {background: yellow;}}media (min-width: 426px) and (max-width: 768px) {/*426~768*/body {background: blue;}}media (min-width: 769px) {/*769~∞*/body {background: green;}}2、使用 import 导入示例代码如下
import index01.css screen and (max-width:1024px) and (min-width:720px)import index02.css screen and (max-width:720px)3、在 link 标签中使用示例代码如下
link relstylesheet typetext/css hrefindex01.css mediascreen and (max-width:1024px) and (min-width:720px)/link relstylesheet typetext/css hrefindex02.css mediascreen and (max-width:720px)/更多关于媒体查询的介绍大家可以查阅《CSS媒体查询》一节。
下面通过一个综合的示例来演示一下响应式布局的实现
!DOCTYPE htmlhtmlheadmeta charsetUTF-8title响应式布局/titlemeta nameviewportcontentwidthdevice-width,initial-scale1.0,maximum-scale1,user-scalableno /style*{margin: 0px;padding: 0px;font-family: 微软雅黑;}#head, #foot, #main{height: 100px;width: 1200px;/*width: 85%;*/background-color: goldenrod;text-align: center;font-size: 48px;line-height: 100px;margin: 0 auto;}#head div{display: none;font-size: 20px;height: 30px;width: 100px;background-color: green;float: right;line-height: 30px;margin-top: 35px;}#head ul{width: 80%;}#head ul li{width: 20%;float: left;text-align: center;list-style: none;font-size: 20px;}#main{height: auto;margin: 10px auto;overflow: hidden;}.left, .center, .right{height: 600px;line-height: 600px;float: left;width: 20%;background-color: red}.center{width: 60%;border-left: 10px solid #FFF;border-right: 10px solid #FFF;box-sizing: border-box;}media only screen and (max-width: 1200px) {#head, #foot, #main{width: 100%;}}media only screen and (max-width: 980px) {.right{display: none;}.left{width: 30%;}.center{width: 70%;border-right: hidden;}}media only screen and (max-width: 640px) {.left, .center, .right{width: 100%;display: block;height: 200px;line-height: 200px;}.center{border: hidden;border-top: 10px solid #FFFFFF;border-bottom: 10px solid #FFFFFF;height: 600px;line-height: 600px;}#head ul{display: none;}#head div{display: block;}}/style /headbodydivheader idheadulliheader1/liliheader2/liliheader2/liliheader2/liliheader2/li/uldivicon/div/headersection idmaindiv classleftleft/divdiv classcentercenter/divdiv classrightright/div/sectionfooter idfootfooter/footer/div/body/html当浏览器窗口小于 1200 像素大于 980 像素时页面的样式如下图所示 当浏览器窗口大于 640 像素小于 980 像素时页面的样式如下图所示 当浏览器窗口小于 640 像素时页面的样式如下图所示 原文地址CSS响应式布局
