移动设备分辨率-媒体查询1

最新推荐文章于 2022-04-14 23:23:15 发布

王艳

最新推荐文章于 2022-04-14 23:23:15 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3 分辨率媒体查询移动设备

本文链接：https://blog.youkuaiyun.com/wangyan_eden/article/details/9230815

6 篇文章

订阅专栏

本文列举了常见移动设备的分辨率，并介绍了如何利用CSS3媒体查询进行响应式网页设计，确保不同尺寸屏幕上的良好用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的几种移动设备分辨率:

320X480 现在最主流的低端安卓机都是这个分辨率;
480X800 现在最主流的中高端安卓智能机的分辨率，包括 windows phone也是这个分辨率;
640X960 iphone4,iphone4s所使用的分辨率;

960x540 代表机型有HTC Sensation、摩托罗拉Atrix 4G;

1024x768 ipad mini/ipad1/ipad2所使用的分辨率;

1136x640 iphone5的分辨率;

1280X720 HD,三星note2,各品牌主流旗舰机型的分辨率，屏幕都很大;

2048x1536 newiPad/ipad4所使用的分辨率;

CSS3媒体查询:

初始化:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

1).使用 media 属性来指定你的样式应该应用于哪一种类型的设备:

<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

2).指定media类型并设置相应的条件:

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)">

3).使用带有CSS @import规则的媒体查询:

@import url("style.css") screen and (min-width:321px) and (max-width:768px);

4).该样式表适用于视口宽度在480到640像素之间的设备:

@media screen and (min-width: 480px) and (max-width: 640px) { … }