媒体查询---移动设备

一、移动端开发特点 
1、移动设备上的浏览器版本基本上为主流浏览器,所以,不需要像PC端开发一样将浏览器的兼容性放在首位。 
2、每一款移动设备的内核不同,分别有webkit、IOS 
3、分辨率不同。分辨率越高,图片显示就越小。 
二、什么是适配 
个人的理解是,通过一定的方式来进行页面的处理,达到在各个分辨率和屏幕大小的移动设备均可正常显示的效果 
三、如何解决 
解决适配问题,除了利用js、window.resize之外,最常用的便是通过css3中的媒体查询来进行移动端的适配。那么,接下来便是我整理的一些使用媒体查询来进行各个移动端的适配解决。 
①1.0版本


@media screen and(min-width: 320px)and(max-width: 359px){ 
    html{ 
        font-size: 12.8px; 
    } 

@media screen and(min-width: 360px)and(max-width: 374px){ 
    html{ 
        font-size: 14.4px; 
    } 

@media screen and(min-width: 375px)and(max-width: 385px){ 
    html{ 
        font-size: 15px; 
    } 

@media screen and(min-width: 386px)and(max-width: 392px) { 
    html { 
        font-size: 15.44px; 
    } 

@media screen and(min-width: 393px)and(max-width: 400px){ 
    html{ 
        font-size: 16px; 
    } 

@media screen and(min-width: 401px)and(max-width: 414px){ 
    html{ 
        font-size: 16.48px; 
    } 

@media screen and(min-width: 750px)and(max-width: 799px){ 
    html{ 
        font-size: 30.72px; 
    } 

②2.0版本 
1、IPhone 
(1)IPhone 4和IPhone 4S 
a、Portrait and Landscape


@media only screen   
  and (min-device-width: 320px)   
  and (max-device-width: 480px)  
  and (-webkit-min-device-pixel-ratio: 2) {  

}  

2)IPhone 5和IPhone 5S 
a、Portrait and Landscape


@media only screen   
  and (min-device-width: 320px)   
  and (max-device-width: 568px)  
  and (-webkit-min-device-pixel-ratio: 2) {  


}  

 (3)IPhone 6 
a、Portrait and Landscape

@media only screen   
  and (min-device-width: 375px)   
  and (max-device-width: 667px)   
  and (-webkit-min-device-pixel-ratio: 2) {   

}  
2018-7-9 10:42:27
Answer﹏厮守 °
在创建响应式网页布局时,媒体查询是实现根据不同设备屏幕尺寸调整样式的核心技术之一。通过使用 CSS 媒体查询,可以针对不同分辨率的设备定义不同的样式规则,从而确保网页在桌面、平板和移动设备上都能良好显示。 ### 使用媒体查询的基本语法 媒体查询的基本语法如下: ```css @media 媒体类型 and (条件) { /* CSS 样式 */ } ``` 例如,当屏幕宽度小于等于 768px 时应用特定样式: ```css @media screen and (max-width: 768px) { body { font-size: 14px; } } ``` ### 设置视口以支持响应式设计 在 HTML 文档的 `<head>` 部分中添加以下 meta 标签,以确保网页在移动设备上正确缩放: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` ### 创建多断点布局 通常建议设置多个断点(breakpoints),以便为不同设备定义合适的布局。常见的断点包括: - **移动设备**:`max-width: 767px` - **平板设备**:`min-width: 768px` 且 `max-width: 1023px` - **桌面设备**:`min-width: 1024px` 示例代码如下: ```css /* 默认样式适用于桌面设备 */ .container { width: 100%; padding: 20px; } /* 平板设备样式 */ @media screen and (min-width: 768px) and (max-width: 1023px) { .container { padding: 15px; } } /* 移动设备样式 */ @media screen and (max-width: 767px) { .container { padding: 10px; } } ``` ### 弹性网格布局与媒体查询结合使用 除了媒体查询之外,还可以结合使用弹性盒子(Flexbox)或 CSS Grid 来构建更灵活的响应式布局结构。例如,使用 Flexbox 实现一个简单的响应式导航栏: ```css .navbar { display: flex; justify-content: space-between; flex-wrap: wrap; } .nav-item { flex: 1 1 100%; } @media screen and (min-width: 768px) { .nav-item { flex: 1 1 auto; } } ``` ### 移动优先原则 推荐采用“移动优先”策略,即先为小屏幕设备编写样式,再通过媒体查询逐步增强大屏幕设备的样式。这种方式有助于提高页面加载性能,并符合现代响应式设计的最佳实践。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值