实现响应式布局的两种方法（媒体查询，Bootstrap框架）

最新推荐文章于 2024-07-16 14:59:55 发布
最新推荐文章于 2024-07-16 14:59:55 发布
阅读量1.1k 收藏 7
点赞数 4
分类专栏： 前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_zy_com/article/details/103881551
版权

媒体查询方法： 理解简单，上手容易，但代码量大
bootstrap： 代码量小，并且可快速搭建

一.媒体查询

运用媒体查询的方法首先了解这几个概念：
1 容器的尺寸：用百分比或者auto代替具体的值
文字大小： em rem 代替 px 手机默认字体 10px pct:14px 网站:12px
相对长度单位：em相对父元素 rem相对于根元素
max-width：最大宽度，min-width：最小宽度

2.响应式网页必须 css media Query 技术 ：根据网页浏览器设计类别不同或者特征不同。而选择执行某些css样式，舍弃掉执行某些css样式
media （设备）: print screen TV tty braille盲文
Query（查询） ： 使用css自动查询浏览器的设备特征

一.不管是媒体查询还是使用框架实现响应式都要先在头部添加这个meta标签

<meta name="viewport" content="width = device-width,initial-scale=1.0,user-scalable = no" />
//name="viewport"   网页有视口   移动端才有
//width = device-width   设置网页的宽度为自动调整，跟手机屏实际宽度大小一样
//initial-scale=1.0    设置网页默认比例 1 ：1 
//user-scalable = no"  设置用户是否可以缩放网页  no为关闭用户缩放

二.书写样式时要点

方式一：
//ps:可将公共样式提取出来
//pc端特有样式
<link rel="stylesheet" media="screen and (max-width:1211px)" type="text/css" href="pc.css"/>
//pad端特有样式
<link rel="stylesheet" media="screen and (max-width:920px)" type="text/css" href="pad.css"/>
//移动端特有样式
<link rel="stylesheet" media="screen and (max-width:767px)" type="text/css" href="phone.css"/>

方式二：或写在同一css文件内
//共同样式
@media screen and (min-width:1101px){//pc端特有样式}
@media screen and (min-width:920px){//pad端特有样式}
@media screen and (min-width:767px){//pad端特有样式}

二. Bootstrap框架(此方法建议参照官网)

//兼容IE处理
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//同上视口处理
<meta name="viewport" content="width=device-width, initial-scale=1">
// 上述2个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后
//然后引用css和js
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
//兼容IE处理
[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
[endif]

< jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) 
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

运用bootstrap实现英特尔官网响应式布局案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Document</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="navbar  er">
		<div class="container">
			<div class="navbar-header">
				<a href="#" class="navber-brand">
					<div class="l_img"></div>
				</a>
				<!-- navbar-toggle:小屏中显示和隐藏，添加一个背景色
				data-tog
				gle="collapse" href="#mymenu" id="mymenu" 控制折叠 -->
				<a href="#mymenu" class="navbar-toggle" data-toggle="collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
			</div>
			<div class="collapse navbar-collapse" id="mymenu">
				<ul  class="nav  navbar-nav navbar-left">
					<li ><a href="#">首页</a></li>
					<li ><a href="#">新闻</a></li>
					<li ><a href="#">菜单<span class="caret"></span></a></li>
				</ul>
				 <ul class="nav navbar-nav navbar-right">
					<li><a href="#">查找内容</a></li>
					<li class="nav_r">|</li>
					<li class="nav_inp"> <input type="text" class="form-control "></li>
					<li><a href="#">简体中文</a></li>
					<li><a href="#">登录</a></li>
			    </ul>
			</div>	
		</div>
	</div>

	<div class="content">
		<div class="container">
		<h3>欢迎来到英特尔@</h3>
		<div class="row margin_b">
		    <div class="col-md-8 top_l">
		    	<img src="img/intel.web.864.486.1.jpg">
		    	<div class="l_bottom">
					<h3>五代酷睿芯，强劲创体验</h3>
					<p>第五代英特尔酷睿处理器光芒登场，哪个阿什顿发侵权法清水房发给阿斯蒂芬过去</p>
					<div>费缴费共和国</div>
		    	</div>
		    </div>
		    <div class="col-md-4 ">
		    	<div class="top_r">
		    		<img src="img/intel.web.368.207.1.jpg">
					<div class="r_bottom">
						<h5>五代酷睿芯，强劲创体验</h5>
						<p>第五代英特尔酷睿处理器光芒登场，哪个阿什顿发侵权法清水房发给阿斯蒂芬过去</p>
						<div>费缴费共和国</div>
			    	</div>
		    	</div>
				
		    	<div class="top_bt">
					<div> </div>
					<div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
					</div>
		    	</div>
		    </div>
		</div>

		<div class="row margin_b">
		    <div class="col-md-8 col-sm-12 col-xs-12 col-md-push-4 top_l">
		    	<img src="img/intel.web.864.486.2.jpg">
		    	<div class="l_bottom">
					<h3>五代酷睿芯，强劲创体验</h3>
					<p>第五代英特尔酷睿处理器光芒登场，哪个阿什顿发侵权法清水房发给阿斯蒂芬过去</p>
					<div>费缴费共和国</div>
		    	</div>
		    </div>

		    <div class="col-md-4 col-sm-12 col-xs-12 col-md-pull-8">
		    	<div class="top_r">
		    		<img src="img/intel.web.368.207.2.jpg">
					<div class="r_bottom">
						<h5>五代酷睿芯，强劲创体验</h5>
						<p>第五代英特尔酷睿处理器光芒登场，哪个阿什顿发侵权法清水房发给阿斯蒂芬过去</p>
						<div>费缴费共和国</div>
			    	</div>
		    	</div>
				
		    	<div class="top_bt">
					<div> </div>
					<div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
					</div>
		    	</div>
		    </div>
		</div>

		<div class="row margin_b">
		    <div class="col-md-8 top_l">
		    	<img src="img/intel.web.864.486.3.jpg">
		    	<div class="l_bottom">
					<h3>五代酷睿芯，强劲创体验</h3>
					<p>第五代英特尔酷睿处理器光芒登场，哪个阿什顿发侵权法清水房发给阿斯蒂芬过去</p>
					<div>费缴费共和国</div>
		    	</div>
		    </div>
		    <div class="col-md-4 ">
		    	<div class="top_r">
		    		<img src="img/intel.web.368.207.3.jpg">
					<div class="r_bottom">
						<h5>五代酷睿芯，强劲创体验</h5>
						<p>第五代英特尔酷睿处理器光芒登场，哪个阿什顿发侵权法清水房发给阿斯蒂芬过去</p>
						<div>费缴费共和国</div>
			    	</div>
		    	</div>
				
		    	<div class="top_bt">
					<div> </div>
					<div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
						<div>因特尔酷睿处理器</div>
					</div>
		    	</div>
		    </div>
		</div>
	     </div>
	</div>
	

	<div class="container footer">
		<div class="row footer_color">
		    <h3 class="col-md-3">关于因特尔</h3>
		    <h3 class="col-md-3">支持</h3>
		    <h3 class="col-md-3">法律声明</h3>
		    <h3 class="col-md-3">社交</h3>
		</div>

		<div class="row color">
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3"><关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		</div>
		<div class="row color">
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3"><关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		</div>
		<div class="row color">
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3"><关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		</div>
		<div class="row color">
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3"><关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		    <div class="col-md-3">关于因特尔</div>
		</div>
	</div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootlint.js"></script>

</body>
</html>
笨啊ni
关注
专栏目录
【前端之旅】响应式布局及Bootstrap框架
孙不坚1208
10-28 544
一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发（Uniapp）以及各种UI组件库、前端框架的学习。
Bootstrap 框架响应式网页开发
m0_66156767的博客
05-21 1654
Bootstrap 响应式开发网页，响应式布局 + 轮播图案例，非常详尽！
响应式布局——媒体查询
m0_45659764的博客
04-05 2780
什么是响应式布局？同一行代码，适配不同的屏幕 一、媒体查询 1.1 基本语法 目标：能够根据设备宽度的变化，设置差异化样式 开发常用写法 媒体特性常用写法 max-width（小于等于） min-width（大于等于） @media (媒体特性) { 选择器{ 样式 } } 1.2书写顺序 min-width（从小到大） max-width（从大到小） 1.3 （了解）完整写法 @media 关键词 ...
响应式布局 —— 媒体查询
qq_69444691的博客
04-26 679
1.视口响应式网页设计是采用CSS的媒体查询技术，将三种已有的开发技巧，包括弹性网格布局、弹性图片、媒体和媒体查询整合在一起，命名为响应式网页设计
前端 css3 媒体查询实现 响应式布局
最新发布
阿乐的博客
07-16 886
前端媒体查询实现 响应式布局
响应式布局--媒体查询
qq_30351747的博客
11-11 1607
响应式布局--媒体查询
响应式布局-----媒体查询
m0_37724356的博客
06-21 425
一、medio 语法 1、设置meta标签 <meta name="viewport" content="width = device-width,initial-scale=1,maximum-scale=1,user-scaled = no"> 2、media格式 @media 媒体类型 and|all|noly (媒体特征){ 选择器{ ...
响应式布局-媒体查询
hgc2020的博客
03-03 339
初步了解响应式布局 文章目录初步了解响应式布局一、响应式页面是什么？二、实现响应式页面1.媒体查询@media 格式2.案例4.常用分辨率断点三、Web开发工具介绍1.常用编辑器2.常用浏览器总结 一、响应式页面是什么？ 为适应不同分辨率屏幕，从而开发的能自动改变网页内容的大小、布局的页面 二、实现响应式页面 1.媒体查询@media 格式 代码如下（示例）： <style> @media (min-width:Xpx) and (max-width:Xpx){ /* CS
Web响应式布局—媒体查询—BootStrap框架及其使用
小琳爱分享的博客
07-29 501
Web响应式布局—媒体查询—BootStrap框架及其使用
框架Bootstrap实现响应式布局
H.千面的博客
05-07 1789
响应式布局： 同一套页面可以兼容不同分辨率的设备。 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子 步骤： 定义容器。相当于之前的table、 容器分类： container：两边留白，固定宽度（每一种设备的宽度不一样） container-fluid：每一种设备都是100%宽度 定义行。相当于之前的tr 样式：row 定义元素。指定该元素在不...
CSS实现响应式布局的方法
09-22
在CSS中，实现响应式布局主要依赖于媒体查询（Media Queries）这一功能，它允许开发者根据不同的条件，如屏幕宽度、高度、分辨率等，应用不同的样式规则。 媒体查询的基本语法是： ```css @media (条件) { /* 在...
html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip_html5响应式布局怎么写
01-14
此外，CSS3还引入了Flexbox（弹性盒模型）和Grid（网格布局），这两种布局模型为创建复杂的响应式布局提供了更多灵活性。Flexbox适用于一维布局，如导航栏或列表，可以轻松实现元素的对齐、排列和自适应大小。Grid则...
XenonAdmin响应式后台管理bootstrap模板_html响应式布局模板
12-04
它基于流行的Bootstrap框架，充分利用了其强大的响应式布局特性，确保在不同设备上都能提供一致且良好的用户体验。这款模板适用于网页开发者、设计师以及需要快速搭建后台界面的企业或个人。 1. **响应式布局**：...
响应式布局之媒体查询
Galary_GY的博客
05-11 542
什么是响应式设计： 响应式设计即页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为
响应式布局媒体查询
qq_41309350的博客
01-21 264
css中媒体查询是什么？怎么使用？ 媒体查询限制CSS样式的范围，以便仅在满足某些媒体条件时才适用。 简单来说：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。 媒体查询可用于检测的媒体特性，比如： width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询具体使用 @media [not | only] [and] (); @media screen { body{
响应式布局之媒体查询功能
哎
05-11 8151
实现响应式布局有很多方法： 媒体查询功能：Media Queries就是其中之一 media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all 如果要在head部分引用，形式如下： 当然还可以在中引用： @media screen{ 选择器{ 属性：属性值； } } 通
CSS样式之响应式布局（媒体查询）
input_form_value的博客
04-14 385
1.媒体查询 媒体查询（Media queries） 1.移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。 2.Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满） 1.1语法规范 1.用@media开通 注意@符号 2.screen表.
媒体查询之响应式布局
vGuYi的博客
05-18 6150
什么是响应式布局? 1.网页可以根据不同的设备或窗口大小呈现出不同的效果 2.使用响应式布局可以使一个网页适配所有设备 3.响应式布局的关键就是媒体查询 4.通过媒体查询可以为不同的设备、设备的 不同状态来分别设置样式。 媒体类型(media type) ： 类型 解释 all 所有设备 braille 盲文 tty 传真 print 文档打印 tv 电视 screen 彩电屏幕 handheld 手持设备 媒体特性
Bootstrap响应式扩展：1300px与1400px布局
Bootstrap响应式布局是一种设计方法，它允许网站在不同设备和屏幕尺寸上保持良好的视觉效果和功能。原有的Bootstrap框架默认提供了一种针对最大宽度为1200像素的响应式设计，当屏幕宽度超过这个范围时，其行为会自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值