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

﹏ヽ暗。殇╰゛Y 2023-06-28 06:22 1阅读 0赞

**媒体查询方法：** 理解简单，上手容易，但代码量大  
**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标签

二.书写样式时要点

方式一：
    //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>
    				
    				<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>