CSS宽有14种:

320、360、375、384、400、414、533、600、768、800、853、1024、1280、1366

CSS高有16种:

360、480、533、568、569、600、640、667、720、736、768、800、853、960、1024、1280

考虑到屏幕可能变为竖屏,那么综合一下共20种:

320、360、375、384、400、414、480、533、568、600、640、667、720、736、768、800、853、853、960、1024、1280、1366

划分一下,大致是:

第一档在小屏幕手机:320~411
第二档在note/pad:400~900 
第三档在桌面端:960~ 
在实际项目中统计的结果表明,手机屏幕的宽度中的95%还在320~411宽。保证手机版画面主体内容在320宽内即可。

/@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}

@media only screen and (max-device-width :480px){ }

@media only screen and (min-device-width :481px){ }

/*6*/

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

/*6+*/

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

/*魅族*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/

@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

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

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {
body {
background: green;
}
}

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */

@media screen and (orientation:landscape){对应样式}

分界点(dp)

手机/平板电脑竖屏

手机/平板电脑横屏

屏幕

列数

间隔宽度(dp)

0

small handset

 

超小

4

16

360

medium handset

 

超小

4

16

400

large handset

 

超小

4

16

480

large handset

small handset

超小

4

16

600

small tablet

medium handset

8

16/24*

720

large tablet

large handset

8

16/24*

840

large tablet

large handset

12

16/24*

960

 

small tablet

12

24

1024**

 

large tablet

中等

12

24

1280**

 

large tablet

中等

12

24

1440**

   

12

24

1600**

   

12

24

1920**

   

超大

12

24

响应式网站布局要适应的当下主流手机屏幕的各个版本的分辨率有哪些(media query)的更多相关文章

  1. java 自适应响应式 网站 源码 SSM 生成 静态化 手机 平板 PC 企业站源码

    前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

  4. HTML5入门教程:响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  5. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  6. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  7. 7 个 Bootstrap 在线编辑器用于快速开发响应式网站

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  8. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  9. 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点

    随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...

随机推荐

  1. 51nod1035(循环节)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1035 题意:中文题诶- 思路:求满足 10^k=1(mod ...

  2. Orthanc+OHIF DICOM Viewer最佳Dicom解析、在线浏览实践指南(解决方案)

    概念 DICOM identifiers Very importantly, the DICOM standard specifies DICOM tags that allow to index e ...

  3. 洛谷P4878 [USACO05DEC]layout布局

    题目描述 正如其他物种一样,奶牛们也喜欢在排队打饭时与它们的朋友挨在一起.\(FJ\) 有编号为 \(1\dots N\) 的 \(N\) 头奶牛 \((2\le N\le 1000)\).开始时,奶 ...

  4. rsyslog服务器同步其他服务器上面应用日志(如mysql审计日志 、nginx日志)

    **环境说明**系统:ubuntu 14.04 (CentOS可以参考http://www.cnblogs.com/hanyifeng/p/5463338.html) rsyslog版本 :8.16. ...

  5. 73th LeetCode Weekly Contest Custom Sort String

    S and T are strings composed of lowercase letters. In S, no letter occurs more than once. S was sort ...

  6. GUI的最终选择 Tkinter(三):Checkbutton组件和Radiobutton组件、LabelFrame组件

    Checkbutton组件 Checkbutton组件就是常见的多选按钮,而Radiobutton则是单选按钮 from tkinter import * root = Tk() v = IntVar ...

  7. pat1055. The World's Richest (25)

    1055. The World's Richest (25) 时间限制 400 ms 内存限制 128000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...

  8. Srping MVC中Controller的void方法

    第一种 通过修改response来修改页面 /** * 方式一:通过声明HttpServletResponse类型的方法入参,来使用HttpServletResponse对象. * 注意:在Contr ...

  9. Entity Framewrok 7beta7中不同版本sql server自动生成分页sql语句的问题

    在EF中,使用linq进行分页是很方便的,假如我们有一个EMP表,结构如下: public class Emp { [Key] public Guid No { get; set; } public ...

  10. 在Azure上搭架***代理服务器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在Azure上搭架***代理服务器.