• 周二. 9月 27th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

响应式网页设计

admin

11月 28, 2021

响应式设计

响应式设计的概念(三要素)

  • 流体网格
  • 响应式图片
  • 媒体查询

相关概念

  • 分辨率 resolution
    • 是指显示器所能显示的像素的多少
  • 像素密度 dpi/ppi
    • 像素密度(pixels per inch),也称PPi,即每英寸屏幕所拥有的像素数,像素密度越大,显示画面细节就越丰富。
  • 设备像素比 dip/dpr
    • 用 iPhone4 举个例子,它有 326 DPI 显示屏,根据上表,智能手机的典型观看距离大概16.8英寸,基准像素为 160 DPI。所以要显示一个 CSS 像素,苹果选择将像素比设置为2,所以看起来就和 163 DPI 手机中显示的一样了。

一、viewport

1.定义

  • viewport 是用户网页的可视区域。
  • 移动端: 布局视口(大部分980px) /理想视口(视口宽度=设备宽度)

2.设置viewport

快捷键:`meta:vp+table`
注意:响应式页面必设(视口宽度等于设备宽度,理想视口)
<meta name="viewport" content="width=device-width,initial-scale=1.0">

3.设置选项

  • width 视口宽度 通常设置为 device-width
  • height 视口高度
  • initical-scalse 初始化缩放比例
    • (有把设备宽度设置为视口宽度的功能)
    • 通常设置为1.0(不放大)
  • maximun-scale 最大缩放比例
  • minmun-scale 最小缩放比例
  • user-scaleable: yes/no 是否允许用户手动缩放

二、媒体查询

1.媒体类型

  • screen 用于电脑显示器。

  • print 用于打印机。

      例:@media print{
      		h1{
      			font-size:200px;
      		}
      	}						
    
  • all 用于所有的媒体设备。

  • aural 用于语音和音频合成器。

  • braille 用于盲人用点字法触觉回馈设备。

  • embossed 用于分页的盲人用点字法打印机。

  • handheld 用于小的手持的设备。

  • projection 用于方案展示,比如幻灯片。

  • tty 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。

  • tv 用于电视机类型的设备。

2.媒体特性

  • width 视口宽度
    • max-width 最大视口宽度 视口宽度<=某个值

    • min-width 最小视口宽度 视口宽度>=某个值

         例如:h1{
        			text-align:center;
        			color:#fff;
        		}
        		@media (800px) {
        			h1{
        				color:red;
        			}
        		}
        		@media(max-800px){
        			body{
        				background:#369;
        			}
        			h1{
        				color:green;
        			}
        		}
        		@media(min-1000px){
        			body{
        				background:pink;
        			}			
        		}
      
  • height 视口高度
    • max-height 最大视口高度
    • min-height 最小视口高度
  • device-width 设备宽度
    • max-device-width 最大设备宽度

    • min-device-width 最小设备宽度

      	例如:<style>	
        	body{
        		text-align:center;
        		background:#333;
        	}
        	h1{
        		color:#fff;
        	}
      
        	@media (max-device- 800px) {
        		body{
        			background-color:#369;
        		}
        	}
        </style>
      
  • device-height 设备高度
    • max-device-height 最大设备高度
    • min-device-height 最小设备高度
  • aspect-ratio 可视窗口宽高比
    • min-aspect-ratio
    • max-aspect-ratio
  • device-aspect-ratio 设备的宽高比
    • max-device-aspect-ratio

    • min-device-aspect-ratio

        例如:<!DOCTYPE html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
        	<title>媒体特性-aspect-ratio</title>
        	<style>
        		body{
        			background:#333;
        			color:#fff;
        			text-align:center;
        		}
        
        		@media (device-aspect-ratio:16/9) {
        			body{
        				background:#123456;
        			}
        		}
        
        		@media (max-aspect-ratio:4/3) {
        			body{
        				background:#123456;
        			}
        		}
        	</style>
        </head>
        <body>
        	<h1>aspect-ratio 视口宽高比</h1>
        </body>
        </html>
      
  • orientation设备的使用方向
    • landscape(水平)/portrait(垂直方向)

       例如:<style>
       	body{
       		background:#333;
       		color:#fff;
       		text-align:center;
       	}
      
       	@media (orientation: landscape) {
       		body{
       			background:#123456;
       		}
       	}
       </style>
      
  • resolution 屏幕像素比 单位 dppx
    • max-resolution

    • min-resolution

        例如:<style>
        		body{
        			background:#333;
        			color:#fff;
        			text-align:center;
        		}
        		
        		@media (min-resolution:2dppx) {
        			body{
        				background:#369;
        			}
        		}	
        	</style>
      

3. 媒体查询 用法

	[email protected] () {
		css属性
	}
	2.<link href="css文件" media="media_query_list">	
	[email protected] url(css文件) mediaType	(智能判断媒体类型)

4.媒体查询的语法

  • and 并且

  • , 或者

  • only only + 媒体类型

  • not 否定 一定要指定媒体类型,因为媒体类型默认all,not后永远返回假

      例如:<style>
      		body{
      			margin:0;
      			color:#fff;
      			background:#333;
      			text-align:center;
      		}		
      		/*@media (min-400px) and (max-800px) {
      			body{
      				background:orange;
      			}
      		}*/		
      		/*@media (max-480px),(min-800px) {
      			body{
      				background:red;
      			}
      		}*/		
      		/*@media not print{
      			body{
      				background:pink;
      			}
      		}*/		
      		@media only screen{
      			body{
      				background:orange;
      			}
      		}
      	</style>
    

三、 断点

1.手机 小屏幕

  • <= 480px

2.平板 中等屏幕

  • >480px 并且 <= 800px

3.PC 大屏幕

  • >800px <= 1400px

4. 超大屏幕

  • >= 1400px

      例:断点 大屏幕优先
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      	<title>断点 大屏幕优先</title>
      	<style>
      		body{
      			margin:0;
      			background:#f5f5f5;
      		}
      		.container{
      			box-sizing: border-box;
      			margin:10px auto;
      			100%;
      			padding:20px;				
      			border:1px solid #ccc;
      			background:#fff;
      			box-shadow: 0px 3px 5px 3px #ccc; 
      		}
      		@media(min-480px) {
      			.container{
      				480px;
      			}
      		}		
      		@media (min- 768px) {
      			.container{
      				750px;
      			}
      		}
      		@media(min-1200px) {
      			.container{
      				1000px;
      			}
      		}		
      	</style>
      </head>
    

四、网格系统

1.使内容先隐藏再显示的方法:

  • 法1.

      	隐:overflow:hidden;/*避免内容溢出*/
      		height:0;
      	现:height:auto;
    
  • 法2.

    隐:display:none; 现:display:block;

2.响应式的网格系统css文件:

	/*响应式的网格系统*/

	
	.row:after{
	content:"";
	display:block;
	clear:both;
	}
	/*清除浮动*/
	.row::after{
	content:"";
	display:block;
	clear:both;
	}

	[class*="col-"]{
	box-sizing: border-box;
	float:left;
	padding:7px 8px;
	}


	/*小屏幕  < 480px*/
	.col-sm-1{
	8.33%;
	}
	
	.col-sm-2{
		16.66%;
	}
	.col-sm-3{
		25%;
	}
	.col-sm-4{
		33.33%;
	}
	.col-sm-5{
		41.66%;
	}
	.col-sm-6{
		50%;
	}
	.col-sm-7{
		58.33%;
	}
	.col-sm-8{
		66.66%;
	}
	.col-sm-9{
		75%;
	}
	.col-sm-10{
		83.33%;
	}
	.col-sm-11{
		91.66%;
	}
	.col-sm-12{
		100%;
	}

	/*中等屏幕 480px~ 800px*/
	@media(min-481px) {
	.col-md-1{
		8.33%;
	}

	.col-md-2{
		16.66%;
	}
	.col-md-3{
		25%;
	}
	.col-md-4{
		33.33%;
	}
	.col-md-5{
		41.66%;
	}
	.col-md-6{
		50%;
	}
	.col-md-7{
		58.33%;
	}
	.col-md-8{
		66.66%;
	}
	.col-md-9{
		75%;
	}
	.col-md-10{
		83.33%;
	}
	.col-md-11{
		91.66%;
	}
	.col-md-12{
		100%;
	}
	}

	/*大屏幕 >800 px*/
	@media(min-801px) {
	.col-lg-1{
		8.33%;
	}

	.col-lg-2{
		16.66%;
	}
	.col-lg-3{
		25%;
	}
	.col-lg-4{
		33.33%;
	}
	.col-lg-5{
		41.66%;
	}
	.col-lg-6{
		50%;
	}
	.col-lg-7{
		58.33%;
	}
	.col-lg-8{
		66.66%;
	}
	.col-lg-9{
		75%;
	}
	.col-lg-10{
		83.33%;
	}
	.col-lg-11{
		91.66%;
	}
	.col-lg-12{
		100%;
	}
	}

五、响应式图片

1.使用背景图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式图片</title>
	<style>
		.container{
			margin:0 auto;
			100%;
		}
		.banner {
			padding-top:56%;/*占本身元素宽度的百分比*/
			border:1px solid #ccc;
			background:url("../images/banner01-small.jpg");
			background-size:100% 100%;
		}		
		@media (min-481px) {
			.banner{
				background:url("../images/banner01-middle.jpg");
			}
		}
		@media(min-801px){
			.banner{
				background:url("../images/banner01.jpg");
			}
		}
		@media(min-1200px){
			.container{
				1000px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>响应式图片</h1>
		<div class="banner">			
		</div>
	</div>
</body>
</html>

2.使用H5的picture标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式图片</title>
	<style>
		.container{
			margin:0 auto;
			100%;
		}
		.banner img{
			100%;
		}	
		@media(min-1200px){
			.container{
				1000px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>响应式图片</h1>
		<div class="banner">

		/*兼容性差,从上到下,如果满足第一个就不会执行下面的了
		所以写断点时由大到小写,不兼容的时候,就会显示img*/
			<picture>
				<source srcset="../images/banner01.jpg"  media="(min-801px)">
				<source srcset="../images/banner01-middle.jpg"  media="(min-481px)">
				<source srcset="../images/banner01-small.jpg">

				<img src="../images/banner01.jpg" alt="">
			</picture>
		</div>
	</div>
</body>
</html>

3.使用picturefill插件

  • picturefill.js文件内容:

      /*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
      
      (function( w ){
      
      // Enable strict mode
      "use strict";
    
      w.picturefill = function() {
      	var ps = w.document.getElementsByTagName( "span" );
    
      	// Loop the pictures
      	for( var i = 0, il = ps.length; i < il; i++ ){
      		if( ps[ i ].getAttribute( "data-picture" ) !== null ){
    
      			var sources = ps[ i ].getElementsByTagName( "span" ),
      				matches = [];
    
      			// See if which sources match
      			for( var j = 0, jl = sources.length; j < jl; j++ ){
      				var media = sources[ j ].getAttribute( "data-media" );
      				// if there's no media specified, OR w.matchMedia is supported 
      				if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
      					matches.push( sources[ j ] );
      				}
      			}
    
      		// Find any existing img element in the picture element
      		var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
    
      		if( matches.length ){
      			var matchedEl = matches.pop();
      			if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
      				picImg = w.document.createElement( "img" );
      				picImg.alt = ps[ i ].getAttribute( "data-alt" );
      			}
    
      			picImg.src =  matchedEl.getAttribute( "data-src" );
      			matchedEl.appendChild( picImg );
      		}
      		else if( picImg ){
      			picImg.parentNode.removeChild( picImg );
      		}
      	}
      	}
      };
    
      // Run on resize and domready (w.load as a fallback)
      if( w.addEventListener ){
      	w.addEventListener( "resize", w.picturefill, false );
      	w.addEventListener( "DOMContentLoaded", function(){
      		w.picturefill();
      		// Run once only
      		w.removeEventListener( "load", w.picturefill, false );
      	}, false );
      	w.addEventListener( "load", w.picturefill, false );
      }
      else if( w.attachEvent ){
      	w.attachEvent( "onload", w.picturefill );
      }
    
      }( this ));
    
  • html文件内容:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      	<meta charset="UTF-8">
      	<title>使用插件 实现 响应式图片</title>
      	<script src="picturefill.js"></script>
      </head>
      <body>
      	<span data-picture data-alt="响应式图片">
      		<span data-src="../images/banner01-small.jpg"></span>
      		<span data-src="../images/banner01-middle.jpg" data-media="(min-768px)"></span>
      		<span data-src="../images/banner01.jpg" data-media="(min-992px)"></span>
      	</span>
      </body>
      </html>
    

六、使用插件 实现 图片拖动

  • html文件:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      	<meta charset="UTF-8">
      	<title>轮播图 滑动插件</title>
      	<link rel="stylesheet" href="swipe.css">
      	<script src="swipe.js"></script>
      	<style>
      		.swipe_wrap{
      			100%;
      		}
      	</style>
      </head>
      <body>
      	<div id="imglist" class="swipe">
      		<div class="swipe_wrap">
      			<div><img src="../images/banner01.jpg" alt="" /></div>
      			<div><img src="../images/banner02.jpg" alt="" /></div>
      			<div ><img src="../images/banner03.jpg" alt="" /></div>
      		</div>
      		<div class="imglist-contral">
      			<span class="left" onclick="mySwipe.prev()"><</span>
      			<span class="right" onclick="mySwipe.next()">></span>
      		</div>
      	</div>
      	<script>
      	window.mySwipe = new Swipe(document.getElementById('imglist'), {
      						  startSlide: 2,
      						  speed: 400,
      						  auto: 3000,
      						  continuous: true,
      						  disableScroll: false,
      						  //stopPropagation: false,
      						 // callback: function(index, elem) {},
      						  //transitionEnd: function(index, elem) {}
      						});
      
      	</script>
      </body>
      </html>
    
  • swipe.css文件内容

      .swipe{
      	overflow: hidden;
      	position:relative;
      	
      }
      .swipe_wrap{
      	position: relative;
      	overflow: hidden;
      }
      .swipe_wrap div{
      	float:left;
      	position:relative;
      	overflow:hidden;
      }
    
  • swipe.js文件:

      在git文件中下载
      输入命令:
      bower install swipe.js

发表回复

您的电子邮箱地址不会被公开。