响应式分辨率几个划分方法

最新推荐文章于 2025-04-16 11:10:31 发布
原创 最新推荐文章于 2025-04-16 11:10:31 发布 · 773 阅读 · 1
标签
#css #html5 #html
本文介绍了如何使用CSS中的@media查询进行页面尺寸的检测，以实现不同设备上的自适应布局。关键临界点包括768px、992px和1200px，分别对应不同的设备类型。通过组合使用min-width和max-width，可以精确控制样式在特定分辨率范围内的应用，确保在手机、平板和桌面等不同设备上提供良好的用户体验。

@media screen 监听页面尺寸

示例：

@media print
@media(min-width:768px){
   
   }
@media(min-width:992px){
   
   }
@media(min-width:1200px){
   
   }
@media(max-width:767px){
   
   }

@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，
我们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。

@media screen 最小宽度

从上面的代码中，可以看出有几个临界点的分辨率，通过他们我们可以写出自己的自适应代码


                

                
                
        

    





  


        

            

                      
                        
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



              

                

              

            
              



	

		

			

				
					
屏幕分辨率兼容性

				
			

			

				

					zhanghuaiwei
				

				

					08-04
					
					2124
					
				

			

		

		

			
				
在不同的屏幕分辨率，浏览器页面展示差异很大。特别是屏幕分辨率较小时，容易发生布局错乱。为了解决这个问题，响应式设计方案应运而生。

			
		

	



              


  
              

                


	

		

			

				
					
运用@media实现网页自适应中的几个关键分辨率

				
			

			

				

					weixin_33843409的博客
				

				

					01-31
					
					528
					
				

			

		

		

			
				




经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？

先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是
768、992、1200。当然了过去也有 些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为...

			
		

	





	

		

			

				
					
bootstrap的@media (min-width: 768px)

				
			

			

				

					lzf的博客
				

				

					06-28
					
					1万+
					
				

			

		

		

			
				
在bootstrap.css中，经常出现
@media (min-width: ...px)
样式名{
.....
}
这表示只有浏览器的屏幕宽度达到min-width时，下面的样式才会执行。
比如导航栏的navbar-left、navbar-right




@media (min-width: 768px)




.navbar-left {

			
		

	



		

			
		



	

		

			

				
					
媒体查询——>@media screen and (min-width: 768px)

				
			

			

				

					qq_39579242的博客
				

				

					08-28
					
					1万+
					
				

			

		

		

			
				
响应式网页设计的时候，往往都需要运用到CSS3的媒体查询技术，实现在大PC端，普通PC端、平板端、移动端呈现不同的样式

参考数据标准：

当屏幕宽度&gt;1200px（超大PC显示器-lg）：    容器宽1170px

当屏幕宽度&gt;992px（普通PC显示器-md）:    容器宽970px

当屏幕宽度&gt;768px（平板显示器-sm）:        容器宽750px

当屏幕...

			
		

	





	

		

			

				
					
[转]css3 media媒体查询器用法总结

				
			

			

				

					前端向朔
				

				

					08-07
					
					2376
					
				

			

		

		

			
				
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。准备工作1：设置Meta标签首先我们在使用Media的时

			
		

	





	

		

			

				
					
@media实现网页自适应中的几个关键分辨率

				
			

			

				

					weixin_30307267的博客
				

				

					11-15
					
					268
					
				

			

		

		

			
				
不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位。可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？首先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600、480的，那些小分辨率的我们都归类为小于767的。为什么是...

			
		

	





	

		

			

				
					
HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程

					
热门推荐

				
			

			

				

					AlbertYang的博客
				

				

					01-17
					
					4万+
					
				

			

		

		

			
				
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743


作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领...

			
		

	





	

		

			

				
					
移动端布局——响应式布局

				
			

			

				

					WikY
				

				

					09-07
					
					1867
					
				

			

		

		

			
				
响应式开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
响应式开发可以实现，一套界面在不同终端进行正常显示。
移动端设备的屏幕分辨率太多，响应式将这些进行了归类：




设备划分
尺寸区间




超小屏幕（手机）
< 768px


小屏设备（平板）
>= 768px  ~  < 992px


中等屏幕（桌面显示器）
>= 992px  ~  <1200px


宽屏设备（大桌面显示器）
>= 1200px


响应式布局容器


			
		

	





	

		

			

				
					
bootstrap响应式页面源码_HTML+CSS实现响应式布局页面，响应式布局入门教程

				
			

			

				

					weixin_39832875的博客
				

				

					01-18
					
					717
					
				

			

		

		

			
				
微信公众号：AlbertYang关注我更多精彩等你来发现！1 什么是响应式布局？响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就...

			
		

	





	

		

			

				
					
CSS媒体查询样式修改的常见区间

				
			

			

				

					HarryHY的博客
				

				

					09-12
					
					3866
					
				

			

		

		

			
				
对应的区间写对应的样式就完事了
  @media screen and (min-width: 320px) and (max-width: 359px) {
  }
  @media screen and (min-width: 360px) and (max-width: 374px) {
  }

  @media screen and (min-width: 375px) and (max...

			
		

	





	

		

			

				
					
媒体查询使用方法@media

				
			

			

				

					abc2346789的博客
				

				

					05-23
					
					1293
					
				

			

		

		

			
				
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。
@media 媒体类型and （媒体特性）{你的样式}
注意：使用Media Queries必须要使用“@media”开头...

			
		

	





	

		

			

				
					
在html样式@media,移动端自适应样式之@media的使用方法

				
			

			

				

					weixin_35079144的博客
				

				

					06-21
					
					2730
					
				

			

		

		

			
				
通用手机端样式：@media all and (orientation : portrait) {/*竖屏*/}@media all and (orientation : landscape) {/*横屏*/}指定手机端高度样式：@media screen and (max-width: 750px)@media screen and (min-width: 720px) and (max-wid...

			
		

	





	

		

			

				
					
利用@media与@media screen进行响应式布局

				
			

			

				

					天空一角的梦
				

				

					07-07
					
					3229
					
				

			

		

		

			
				
了解Media QueriesMedia Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句...

			
		

	





	

		

			

				
					
CSS的@media语法实现页面端手机端的自适应

				
			

			

				

					xdnloveme的博客
				

				

					07-11
					
					1万+
					
				

			

		

		

			
				
在CSS3版本内有这么一个语法：
@media mediatype and|not|only (media
 feature) {
    CSS-Code;
} 
最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性：
@media，今天花了1小时左右做了一个自适应的小demo，如下图所示：
电脑端的显示图：

			
		

	





	

		

			

				
					
鸿蒙布局响应不同设备

				
			

			

				

					wobuxiangquming的博客
				

				

					06-06
					
					1800
					
				

			

		

		

			
				
设置父容器在主轴方向上的剩余空间分配给此属性所在组件的比例。默认值：设置父容器压缩尺寸分配给此属性所在组件的比例。父容器为column row时，默认值：0父容器为flex时，默认值：1。

			
		

	





	

		

			

				
					
前端笔记之响应式

					
最新发布

				
			

			

				

					m0_62946540的博客
				

				

					04-16
					
					1132
					
				

			

		

		

			
				
前端笔记之响应式

			
		

	





	

		

			

				
					
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例

				
			

			

				

					weixin_33375038的博客
				

				

					06-16
					
					6666
					
				

			

		

		

			
				
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...

			
		

	





	

		

			

				
					
@media screen实现屏幕自适应内容详解

				
			

			

				

					夜空下的凝视
				

				

					05-16
					
					2万+
					
				

			

		

		

			
				
优点：
无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值。
准备工作1：设置Meta标签
首先，在使用Media时，需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=...

			
		

	





	

		

			

				
					
js的@media用法（根据不同页面适应）

				
			

			

				

					weixin_43085797的博客
				

				

					03-26
					
					4895
					
				

			

		

		

			
				
响应式布局 responsive design @media 属性

bootstrap  css 分析：

@media (min-width:768px){

body{***}

}

use @media about the browser as a media

[disabled] | :active | 

 
@media mediatype and|not|only (media...

			
		

	



              




          





        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值