像素、视口与像素比

时间:2023-06-20 17:29:06 类型:HTML/CSS
字号:    

1.1 像素

	
	1) 屏幕是由一个一个发光的小点构成的,这个小点就是像素
	2) 分辨率:1920*1080  ,这实质上就是说的小点的数量。
	
	3) 在前端开发中,像素分为两种:即物理像素和CSS像素。
		
		a) 物理像素:上述所说的小点点就是物理像素。
			
		b) CSS像素:编写网页时我们使用的像素就是CSS像素。
						
				1) 浏览器在显示网页时,需要将CSS像素转换为物理像素,再呈现页面。
				
				2) 一个CSS像素最终转为为几个物理像素,最终由浏览器决定。
				   默认情况下,一个CSS像素 = 一个物理像素。	


		 						

1.2 视口

	
	+++ 视口(只看宽度,不看高度)
	
			1) 视口就是屏幕中用来显示网页的区域。		  			
			2) 视口的大小可以等价于HTML标签的大小。CSS像素表示。
			
			3) 视口的大小随着浏览器的大小改变而改变。但是不会改变像素比。
			
			4) 只有手动设置视口的大小,才可以改变像素比。
				1) 利用浏览器的缩放,可以改变像素比。
				2) 手动设置视口大小,改变像素比。
						
	查看视口大小:  浏览器右键->检查->计算样式-> 查看html的大小		 
	
   	

1.3 像素比

	    1) CSS像素/物理像素=像素比
	   	
		2) 可以通过查看浏览器全屏的视口大小。来计算像素比
				
				全屏视口大小/屏幕分辨率 = 像素比。
				
					屏幕的分辨率指的是物理像素。
				        视口的大小指的的是CSS像素。(视口的大小等价于HTML标签的大小)		

		3) 只有手动改变视口的大小,才会改变像素比。
		   
		   		像素比>1 ,意味着网页缩小展示,像素比越小,网页越小。
		   		像素比<1,意味着网页放大展示,像素比越大,网页越大。		

					

二、移动端网页

2.1 移动端特性

	
	1.默认情况下,移动端浏览PC端网页都会将视口设置为980px。以确保PC端网页在移动端正常显示。
	
	
	2.如果网页的宽度超过980,则移动端的浏览器会自动对网页缩放以完整显示网页。


	3.手机的物理像素一般为750px 。手机的像素点远远小于电脑的像素点。			
			
				在不同屏幕中,像素的大小是不同的,像素越小,屏幕越清晰。
			
						电脑屏幕 	  24寸   1920px * 1080px  (物理像素)
						苹果xxx手机    4.7寸  750px  * 1334px  (物理像素)
							
				由上面可以看到手机的像素点远远小于电脑的像素点。
		
		 	

2.2 移动端浏览PC端网页,网页会缩放展示

	
	1. 移动端浏览PC端没有做适配的网页,网页会缩放展示。一般会看全整个网页。	
		
		原因:
			 1) 默认情况下,移动端浏览PC端网页都会将视口设置为980px。
			    此时像素比一般会<0,网页会缩小展示。
			 
			 2) 如果网页的宽度超过980,则移动端的浏览器会自动对网页缩放以完整显示网页。
			
			 3) 手机的像素点远远小于PC的像素点。				
	

1)移动端浏览PC端网页,网页会缩小展示

 
	 移动端:
			手机分辨率  750px (物理像素)
	        视口       980px  (CSS像素)
	        	
	        像素比:980/750=1:0.7
	        		  相当于一个css像素等价于0.7个物理像素。
	        		  		

2)案例

    问题:一个900px的盒子在手机中如何显示?

	900像素的盒子实质上在手机上只占750px物理像素。所以导致非常小的展示。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer{
            width:900px;
            height:900px;
           background-color: red;
        }

    </style>
    <body>
         <div></div>
    </body>
    
</html>
	 网页在移动端会缩放展示。并且无溢出。 
				( 由上图可以看到900像素的盒子在手机中没有溢出。)

	 
	 原因:
			手机像素:750px  * 1334px  (物理像素)
			视口:   900px (CSS像素)
			
			像素比:900/750=1/0.7
		
				一个CSS像素等价于0.7个物理像素。
				并且手机的像素点比电脑的像素点更小,所以网页会缩放

2.3 为什么移动端网页需要专门编写

		
	1.默认情况下,移动端浏览PC端网页,都会将视口设置为980px。以确保PC端网页在移动端正常使用。
	  不过由于像素比,PC端网页一般都是缩放展示,不会有很好的体验。
					
					像素比:
					        980/750=1/0.7。
							即一个CSS像素=0.7个物理像素。所以会缩放展示。	 

	2. 基于此移动端网页一般都是专门编写。	

三、设置完美视口

	+++ 设置视口的作用
		
				编写移动端网页时,我们必须有一个合理的像素比。
				设置视口,就可以调节像素比。即调节一个CSS像素占多少个物理像素。
				这样才能使网页合理显示。

3.1 手动设置视口

	可以通过meta标签调节视口大小:		    			 
   			 <meta name="viewport" content="width=1000px">  设置视口大小为1000px。
   			

1)移动端浏览PC端网页,一般默认将视口设置为980px

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer{
            width:900px;
            height:900px;
           background-color: red;
        }   

    </style>
    <body>

    <div>

    </div>
    </body>
    
</html>

2.)通过meta标签来设置视口。改变视口,就可以改变像素比。从而改变网页的显示方式


3.2 移动端完美视口

			
	1.不同设备的完美视口是不同的。
	  所以如果我们通过meta标签指定固定的视口。只能是适配某个设备,而不是通用。
	    	

	2.完美视口
			1.每一个移动端设置时,都会有一个最佳的像素比。
	  		  一般我们只需要将网页的视口设置为该值即可,就可以得到很好的效果。
	  		  
			2.将像素比设置为最佳像素比的视口大小,我们称之为完美视口。
			
			3.我们通过meta标签来指定完美视口。
			
	    
	 3.为移动端设置完美视口	 		
	 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			


<