@media only screen 手机端适配判断

最新推荐文章于 2024-07-05 16:20:05 发布
最新推荐文章于 2024-07-05 16:20:05 发布
阅读量8.2k 收藏 4
点赞数
分类专栏： css html 文章标签： 自适应 iPhone X适配 @media
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyw0713/article/details/82909065
版权
本文介绍了如何使用@media only screen进行手机端屏幕适配，特别关注了iPhone 5, X, Plus系列及三星Galaxy S5等设备的屏幕尺寸。强调了absolute和relative定位的运用，并提醒将@media查询置于需要修改样式的样式之后，避免不规范的写法。" 112411913,10535617,图像标注技术详解：从2D边框到语义分割,"['计算机视觉', '图像处理', '深度学习', '数据标注', '人工智能应用']
摘要由CSDN通过智能技术生成

 

做好屏幕自适应，一般只需要注意iPhone5，x，plus,等问题，注意使用absolute，relative

/*iphone 6,7,8plus screen-width:414px */

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {}

/*iphone X screen-width:375px, screen-hight: 812px */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}

/*iphone 5,5E screen-height:568px*/

  @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {}

/*iphone 4  screen-width:320px*/

@media only screen and (min-width: 320px) and (max-width: 360px) {}


/*三星Galaxy S5  screen-width:360px*/


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  _不积跬步无以至千里
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
@media screen 针对不同移动设备

				
			

			

				

					阳光男孩的专栏
				

				

					12-24
					
					551
					
				

			

		

		

			
				
@media screen针对不同移动设备-响应式设计
概念：
device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。
device-width：输入设备屏幕的可视宽度。
orientation ：屏幕横竖屏定向。landscape 是横向，portrait 是纵向【ipad 相反】
/* iPhone 4 ----------- */
@media only scree...

			
		

	



                

              
                



	

		

			

				
					
响应式布局设置--@media only screen

				
			

			

				

					光英的记忆博客
				

				

					02-01
					
					3297
					
				

			

		

		

			
				
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)

/* 常用类型 */
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视

screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺

			
		

	



                


  
              

                


	

		

			

				
					
vue 项目中使用@media screen and (max-width: 460px)适配移动端，为啥在安卓手机会变化但是IOS没有变化

					
最新发布

				
			

			

				

					motoudi的博客
				

				

					07-05
					
					322
					
				

			

		

		

			
				
其中，width=device-width 表示让页面宽度等于设备宽度，initial-scale=1.0 表示页面初始缩放比例为1，maximum-scale=1.0 表示不允许用户放大页面，user-scalable=no 表示禁止用户手动缩放。在 Vue 页面中，如果你的页面布局和设计不符合 iOS 缩放机制的规则，就可能会导致 iOS 在显示你的页面时自动放大。4.使用 CSS media query 等技术，对于不同的设备和屏幕尺寸，设置不同的样式和布局，以便让页面在不同的设备上都能够正常显示。

			
		

	





	

		

			

				
					
响应式布局

				
			

			

				

					yiguang_820的博客
				

				

					06-04
					
					1066
					
				

			

		

		

			
				
1、响应式布局介绍

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，就是一个网页可以在不同设备上显示，比如：电脑、平板、手机等，不同设备都可以兼容显示。这样就不必为每一种终端再去制作相应的网页。

2、响应式布局特点

有很强的灵活性，不同的终端设备都可以显示。代码冗余多，会加载许多隐藏的元素，加载时间长。

3、响应式布局的实现方式

媒体查询、流体布局、 弹性布局、第三方框架、Js

4、响应式布局媒体查询使用

1、直接在CSS中使用：
@media 类型(常选all/screen

			
		

	



		

			
		



	

		

			

				
					
响应式（自适应屏幕）

				
			

			

				

					零一
				

				

					12-02
					
					6998
					
				

			

		

		

			
				
一、css中@media写法

@media only screen and (min-width: 1024px)最小宽度1024

Safari版本5.1。7（7534.57.2）支持
chrome版本26.0.1410.64 m支持
opera版本12.15支持
fireFox版本21.0支持
IE10版本10.0.92000.16580 支持



@media ...

			
		

	





	

		

			

				
					
响应式布局设置--@media only screen and  (转载)

					
热门推荐

				
			

			

				

					百九
				

				

					04-29
					
					2万+
					
				

			

		

		

			
				
@media only screen and 
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)


/* 常用类型 */
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，

			
		

	





	

		

			

				
					
响应式布局@media only screen and 解释以及demo

				
			

			

				

					好吗好的~的技术博客
				

				

					09-26
					
					5690
					
				

			

		

		

			
				
摘自：https://blog.csdn.net/qq_34960569/article/details/51775737

only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)

/* 常用类型 */
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打...

			
		

	





	

		

			

				
					
CSS 利用@media screen判断识别手机/PC端浏览器

				
			

			

				

					best_inh的专栏
				

				

					01-07
					
					1万+
					
				

			

		

		

			
				
一、写此篇的初衷：

手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在PC端浏览器不用处理。

二、功能实现依据：

首先，CSS @media查询中有判断横屏（orientation:landscape）、竖屏（orientation:portrait）的功能，那么分别在电脑、手机浏览器上是否有不同表现呢，如果有，就靠它了。先看如下代码：


<style type="text

			
		

	





	

		

			

				
					
详解CSS3中@media的实际使用

				
			

			

				

					09-25
				

			

		

		

			
				
`only`关键字可以用于限制`@media`查询只应用于特定的设备类型，如`only screen`表示只针对屏幕设备。  `device-aspect-ratio`属性特别有用，它可以让我们根据设备的长宽比来调整样式。例如，我们可以为4:3比例的...

			
		

	





	

		

			

				
					
让@media screen兼容ie8/ie7/ie6

				
			

			

				

					03-09
				

			

		

		

			
				
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒介查询，亲测可用。（注意：需要大家放到服务器上再使用，不能跨域使用，放到虚拟空间中也可以进行测试，本地测试ie6-8无效果）

			
		

	





	

		

			

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

				
			

			

				

					11-21
				

			

		

		

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

			
		

	





	

		

			

				
					
css使用@media响应式适配各种屏幕的方法示例

				
			

			

				

					01-19
				

			

		

		

			
				
定义和使用 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你...@media screen and (min-width:1000px) and (max-width: 1200px){  .cont_li

			
		

	





	

		

			

				
					
JS中使用media实现响应式布局

				
			

			

				

					12-04
				

			

		

		

			
				
 @media screen and (min-width: 321px) and (max-width: 375px) { ... }  ...  ```  3. JavaScript与`@media`查询的结合：  虽然`@media`查询在CSS中定义，但JavaScript可以用来监听这些查询的变化，以执行相应的...

			
		

	





	

		

			

				
					
@media only screen and

				
			

			

				

					易天海
				

				

					12-24
					
					3692
					
				

			

		

		

			
				
@media screen and 不起作用原因汇总。


div{display:flex;}/*那么div所有的display效果都将无法生效*/


第一种错误：格式书写错误and后面必须有空格例如下面代码；


@media screen and (max-width:500px){ }


第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖

注意：建议在书写css的过...

			
		

	





	

		

			

				
					
利用@media screen实现网页布局的自适应

				
			

			

				

					weixin_43846505的博客
				

				

					02-16
					
					518
					
				

			

		

		

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

这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
height = device-heigh...

			
		

	





	

		

			

				
					
CSS3--媒体查询

				
			

			

				

					rickmorty236的博客
				

				

					01-19
					
					310
					
				

			

		

		

			
				
媒体查询

			
		

	





	

		

			

				
					
前端媒体查询@media示例详解和calc()函数的使用

				
			

			

				

					weixin_45096939的博客
				

				

					12-17
					
					1819
					
				

			

		

		

			
				
如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。当布局的时候，为了做到自适应我们不能把页面的宽高写死，但有一种情况，如果我们知道布局的每个板块之前都有16px的间隔，这个间隔是固定的，这时候我们就需要使用calc函数实现页面效果。用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。not, and和 only 可用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

			
		

	





	

		

			

				
					
前端适配方案

				
			

			

				

					Niucode的博客
				

				

					03-26
					
					765
					
				

			

		

		

			
				
前端适配的几种方案

			
		

	





	

		

			

				
					
@media only screen

				
			

			

				

					02-18
				

			

		

		

			
				
@media only screen是CSS中的一个媒体查询规则，用于指定在特定屏幕尺寸或媒体类型下应用的样式。它可以用来创建响应式设计，使网页能够根据不同设备的屏幕尺寸和特性进行适配。  @media只针对屏幕媒体类型，而忽略...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值