CSS响应式布局(自适应布局)
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验,而且随着大屏智能手机的普及,用“大势所趋”来形容也不为过。
要实现响应式布局,常用的方式有以下几种:
- 使用 CSS 中的媒体查询(最简单);
- 使用 JavaScript(使用成本比较高);
- 使用第三方开源框架(例如 bootstrap,可以很好的支持各种浏览器)。
接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
设置 meta 标签
首先,我们需要设置 meta 标签来告诉浏览器,让视口(网页的可视区域)的宽度等于设备的宽度,并禁止用户对页面的缩放,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
在设置视口时需要注意,视口就是网页可见区域的尺寸,设置视口时只设置宽度就行,不用在乎高度,具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下:
- viewport:即视口,表示网页的可视区域;
- width:控制 viewport 的大小,可以指定一个具体的值,例如 600,也可以是由关键字组成的特殊值,例如 device-width 就表示设备的宽度;
- initial-scale:表示初始缩放比例,也就是页面第一次加载时的缩放比例;
- maximum-scale:表示允许用户缩放的最大比例,范围从 0 到 10.0;
- minimum-scale:表示允许用户缩放到最小比例,范围从 0 到 10.0;
- user-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 rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/><link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
下面通过一个综合的示例来演示一下响应式布局的实现:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>响应式布局</title><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" /><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> </head><body><div><header id="head"><ul><li>header1</li><li>header2</li><li>header2</li><li>header2</li><li>header2</li></ul><div>icon</div></header><section id="main"><div class="left">left</div><div class="center">center</div><div class="right">right</div></section><footer id="foot">footer</footer></div></body>
</html>
当浏览器窗口小于 1200 像素大于 980 像素时,页面的样式如下图所示:
当浏览器窗口大于 640 像素小于 980 像素时,页面的样式如下图所示:
当浏览器窗口小于 640 像素时,页面的样式如下图所示:
CSS响应式布局(自适应布局)相关推荐
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
- CSS - 响应式布局(二)响应式栅格系统
目录 响应式栅格系统 栅格 栅格系统 响应式栅格系统 BootStrap响应式栅格系统 简单说明 利用SCSS实现BootStrap的响应式栅格系统 响应式栅格系统 栅格 在弄清楚响应式栅格系统前,我 ...
- html自适应布局视频,2018年最新的8个响应式与自适应视频教程推荐
在学习前端的过程中经常可以看到自适应布局和响应式布局,那么,什么是响应式布局?自适应布局又是什么呢?响应式布局设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本:自适应布局设计是能使网 ...
- css响应式网页设计:自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度 文章目录 html响应式网页设计:自动适应屏幕宽度 背景 一."自适应网页设计"的概念 二.允许网页宽度自动调整-使用meta标签:vie ...
- css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么 发布时间:2020-12-05 13:24:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
- 响应式网页的布局设计
值得收藏的14款响应式前端开发框架 作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
- html通过分辨率动态加载css,做响应式页面,响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面 响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可 自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理 法1 ...
最新文章
- bzoj2154 Crash的数字表格
- 删除不再位于远程的跟踪分支
- 我们来谈下高并发和分布式中的幂等处理
- 05_学生管理系统,xml读写,布局的综合应用
- 图论:dij算法优化:双端队列及详细证明
- P5643-[PKUWC2018]随机游走【min-max容斥,dp】
- 【渝粤题库】陕西师范大学200221 中国思想史 作业(高起专)
- [Python教程] 一只乌龟其实也很酷 (1、动起来)
- python特点 可移植性_下面的选项中,不属于Python特点的是( )_学小易找答案
- layer checkbox
- Focal Loss-RetinaNet算法解析
- mongodb的初步使用
- laravel php的if判断,Thinkphp框架和Laravel框架的区别
- prisma 连接不上Postgres
- ASP.NET 抓取网页源文件
- 使用scrcpy开源进行电脑usb控制安卓手机,简单方便
- 借WS2812 PWM DMA驱动调试浅谈STM32调试思路
- 非常强大的文件比较工具:Vimdiff
- isee图片专家批量处理图片大小教程
- html仿游戏网站首页面
热门文章
- 8种常见的HTTP请求方式你知道多少?
- 实名认证,相关名称解释;信息比对;个人要素;运营商要素;银行卡要素;组织机构要素
- Word 2016 撰写论文: 公式居中、编号右对齐
- 学习Vue3 第九章(认识computed计算属性)
- 电脑桌面云便签怎么开启桌面嵌入让便签悬浮在桌面上?
- oracle中表和视图的区别,Oracle数据库中表与视图的应用
- 全民“动吃日”,肯德基WOW桶携手王一博掀起热血运动季
- 基于Android的旅游助手app酒店景点预订系统(计算机毕业设计)
- 重镑!首个国产桌面操作系统开发者平台“开放麒麟”正式发布
- 交换机配置ssh密码验证登录方式