面试必问的8个CSS响应式单位,你知道几个？

已于 2022-04-23 00:19:36 修改
阅读量2.4k 收藏 31
点赞数 24
文章标签： css 面试 css3
于 2021-10-27 15:03:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shangyanaf/article/details/120993281
版权
学透CSS 专栏收录该内容
56 篇文章 13 订阅 ¥99.90 ¥99.00
订阅专栏

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>http://sylblog.xin/archives/51

前言

今天，我们生活在手机的世界里。有如此多的手机，有如此多的屏幕，屏幕的尺寸从当年的2.4英寸到3.5英寸、4.0英寸、5.0英寸等等，到现在基本上6.0英寸起步了。

em

它是相对于父字体大小的。

比如给元素设置font-size: 2em，这里的默认字体大小实际上是继承自父亲的大小，font-size: 2em表示当前元素字体大小是父亲的2倍。

求下面em的px值


                

                
                
        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  YOLO大王
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    24
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    31
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  11
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
css响应式页面实现

				
			

			

				

					ajhongshaorou的博客
				

				

					03-02
					
					9470
					
				

			

		

		

			
				
响应式页面概念部分1.响应式页面的由来在很久很久以前，我们做的网页只是为了PC端的观看、使用，直到2000年，2.5G手机的出现，人们可以通过手机来访问网络，使得服务商们纷纷做了另一套网页为手机访问服务，这个情况一直持续到2009年，3G智能手机的出现，手机可以访问PC端页面，只是对PC端页面进行了压缩，接着IOS提出了viewport(视口)的概念，才得以改进，大型网页可以不经缩放直接显示在手机—

			
		

	



                

              
                



	

		

			

				
					
CSS长度单位 和 CSS响应式（媒体查询）

				
			

			

				

					Yanfengting的博客
				

				

					09-30
					
					682
					
				

			

		

		

			
				


CSS长度单位：


长度单位包括包括：相对单位和绝对单位。.
相对长度单位包括有：
px,em, ex, ch, rem, vw, vh, vmax, vmin,%
px(像素), em(元素), %(百分比), ex(元素的一半), ch(数字0的宽度), rem(相对根元素的元素单位),
vw(视口宽度), vh(视口高度), vmax(取视口宽高中较大的), vmin(取视口宽高中较小...

			
		

	



                


  
              

                


	

		

			

				
					
使用postcss实现移动端响应式单位设置

				
			

			

				

					RogerWang_H5的博客
				

				

					07-06
					
					560
					
				

			

		

		

			
				
目录前言一、依赖的npm插件二、配置postcss.config.js文件三、开发配置新增postcss-loader总结
前言

最近工作中有个移动端的项目是用px布局的，非响应式。要实现单位响应式，大量px布局的样式文件，改rem的话比较麻烦，因此尝试了postCss自动转换响应式单位的方案。


一、依赖的npm插件
autoprefixer
postcss
postcss-cssnext
postcss-import
postcss-loader
postcss-modules-values
pos

			
		

	





	

		

			

				
					
vue-cli 中是使用css单位rem，实现响应式布局

				
			

			

				

					Stiven_Lu的博客
				

				

					05-25
					
					4892
					
				

			

		

		

			
				
分享一种vue-lic中使用rem，实现响应式布局的超简单的方法。

 

第一步：封装设置rem的方法，放在公用类的js文件中，或者直接放在main.js文件中。


/**
 * 设置rem
 * @param pwidth
 * @param prem
 */
export function getRem (pwidth, prem) {
  var html = document.getE...

			
		

	



		

			
		



	

		

			

				
					
CSS: 单位计算与响应式布局

				
			

			

				

					nonlinearthink的博客
				

				

					07-08
					
					869
					
				

			

		

		

			
				
想要更好的阅读体验，可以转我的个人博客。
像素思维
这一小节，我们将介绍 px(Pixel)。
逻辑像素而不是物理像素
px 从字面上来看是像素的意思，很多新手一上来可能会认为它的物理像素。
这里必须要澄清，px一般是指逻辑像素，它会根据浏览器、操作系统、硬件设备做适当的缩放。
但是，通常96px对应了一个物理英寸。
像素级的完美与响应式布局
最开始，px 被设计出来的时候所奉行的哲学就是提供像素级别的完美。
早期的网页设计者会在一个固定大小的页面中设计网页，一般是 800px，你的浏览器如果超过来这个尺寸

			
		

	





	

		

			

				
					
面试必问的8个CSS响应式单位,你知道几个？.doc

				
			

			

				

					07-08
				

			

		

		

			
				
面试必问的8个CSS响应式单位,你知道几个？.doc

			
		

	





	

		

			

				
					
用于响应式设计的9个CSS技巧

				
			

			

				

					02-03
				

			

		

		

			
				
而随着响应式设计越来越流行，CSS在响应式设计中已扮演着举足轻重的角色，在进行响应式设计时，倘若你能掌握一些CSS技巧，将大大提高你的工作效率。本文将介绍一些CSS设计技巧，包括取消下划线、设计响应式视频、...

			
		

	





	

		

			

				
					
你知道CSS中长度单位pt、px、dpi的意思吗？

				
			

			

				

					09-27
				

			

		

		

			
				
在印刷排版中“point”是一个绝对的单位，它等于1/72英寸。...　但在CSS中pt的含义却非如此，例如我们指定一个字体是9pt，浏览器会以CSS规范解释，它等于：　9*1/72=1/8inch　这是一个误解，因为我们的显示器被分割为

			
		

	





	

		

			

				
					
自适应屏幕的CSS响应式布局设计技巧总结

				
			

			

				

					09-24
				

			

		

		

			
				
主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下

			
		

	





	

		

			

				
					
如何决定响应式网站的 CSS 单位？

				
			

			

				

					努力是为了站在万人之中，成为别人的光
				

				

					08-09
					
					6274
					
				

			

		

		

			
				
很高兴又见面了！

在我们创建适合各种设备的响应式网站时，了解正确的CSS 单元很重要。但在深入研究决策之前，让我们对它们进行分类以便了解它们的类别。

如何决定响应式网站的 CSS 单位？ px 单位 ％ 单位⚓ em 单位 rem 单位 vw 单位 vh 单位 wuhu ! 起飞 !概括总结
1.绝对单位

px - 像素
pt - 点
pc - Picas
in - 英寸
cm - 厘米
mm - 毫米

2.百分比单位

百分比 % 单位

3.相对单位

相对于字体大小
em
 re

			
		

	





	

		

			

				
					
CSS新单位vw,vh在响应式设计中的应用

				
			

			

				

					wang252949的博客
				

				

					12-08
					
					1108
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
CSS中的相对单位和绝对单位，以及rem自适应布局

				
			

			

				

					前端开发博客
				

				

					08-30
					
					724
					
				

			

		

		

			
				
在CSS中，我们经常需要指定元素的尺寸、间距和位置。为此，我们可以使用各种单位来定义这些值。本文将重点介绍CSS中的相对单位和绝对单位，并解释它们之间的区别。相对单位百分比（%）：百分比单位是相对于父元素的尺寸来计算的。例如，如果我们将一个元素的宽度设置为50%，它将占据其父元素宽度的一半。百分比单位在实现响应式设计时非常有用，因为它们可以根据父元素的大小自动调整。em：em单位是相对于父元素的字...

			
		

	





	

		

			

				
					
响应式布局之尺寸单位rem使用

				
			

			

				

					又是再见?
				

				

					10-25
					
					9043
					
				

			

		

		

			
				
web实际开发过程中,特别是移动端的页面，会遇到元素尺寸及字体在不同分辨率设备上表现差异较大，甚至严重影响用户体验；

我现在的做法是使用rem作为尺寸单位，来实现页面内元素尺寸及字体在不同宽度设备下自由缩放尺寸，从而解决小屏幕上显示牛大字的尴尬情况；

1. 设置html的字体为100px;

2.页面内需要用到尺寸的地方都使用rem作为尺寸单位；（这样在改变html字体大小的时候页

			
		

	





	

		

			

				
					
CSS单位vmin、vmax

					
最新发布

				
			

			

				

					a_strong_pig的博客
				

				

					12-06
					
					123
					
				

			

		

		

			
				
css单位 vmin和vmax

			
		

	





	

		

			

				
					
响应式布局——视口viewport和常用单位

				
			

			

				

					weixin_51081257的博客
				

				

					11-25
					
					2447
					
				

			

		

		

			
				
了解一下响应式布局视口和视口常用单位

			
		

	





	

		

			

				
					
CSS3实现的响应式字体：自适应视图窗口大小的新单位

					
热门推荐

				
			

			

				

					夜鹏少的博客
				

				

					11-13
					
					1万+
					
				

			

		

		

			
				
viewpoint

css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。

“viewpoint” = window size

vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大


兼容性：chrome 20

			
		

	





	

		

			

				
					
常见CSS布局单位 px em rem vm vh 、响应式布局如何实现及原理、弹性布局、浮动布局

				
			

			

				

					频繁记录
				

				

					06-14
					
					1413
					
				

			

		

		

			
				
常见CSS布局单位 px em rem vm vh 、响应式布局如何实现及原理、弹性布局、浮动布局

			
		

	





	

		

			

				
					
vmin的简单小用例

				
			

			

				

					CSS 初学者指南
				

				

					06-27
					
					874
					
				

			

		

		

			
				
视口单位是10vw（视口宽度的10％）或2vh（视口高度的2％）。 有时有用，因为它们总是相对于视口。 没有父元素的级联或影响。 
 还有vmin，这是vw和vh中的较小者，而vmax是较大的。 这些值可用于需要长度值的任何值，例如px或em或％或其他值。 
 让我们看一下使用vmin的微小设计模式。 


 标头块！ 
 如果像这样设置<header>的padding ： 
he...

			
		

	





	

		

			

				
					
【CSS面试题】CSS响应式

				
			

			

				

					Milk~每天分享一点点，技术进步一点点
				

				

					07-17
					
					376
					
				

			

		

		

			
				
1. rem是什么?
rem是一个长度单位

px是绝对长度单位，最常用（但无法做响应式）
em，相对长度单位，相对于父元素，不常用
rem,相对长度单位，相对于根元素，常用于响应式布局

核心代码演示：
初始化：
  <style>
    html{
       font-size: 100px;
    }
    div{
        background-color: #ccc;
        margin-top: 10px;
    }
    </style>

			
		

	





	

		

			

				
					
html+css面试题

				
			

			

				

					09-09
				

			

		

		

			
				
9. 请描述一下响应式设计的原理以及如何实现响应式布局。 10. 什么是CSS预处理器？常见的CSS预处理器有哪些？  这些问题涵盖了HTML和CSS的基础知识，希望对你进行面试准备有所帮助。如果你有任何进一步的问题，我很...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 11

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
YOLO大王

			
你的打赏，我的动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值