手机,平板,电脑,超大屏幕宽度响应式

关于 @media 媒体查询属性包含很多知识点，这里举个宽度响应式的例子，可以满足各大屏幕尺寸的布局需要。

这里需要说明一点：(响应式的含义：响应式说白了，就是在不同的媒介条件下采用不同的css样式来进行适应各种条件的需要).这里仅仅是个人的理解，有误请不要采纳。

例子的HTML代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>响应式</title>
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div class="responsive">
　　<div class="responsive01">超小屏幕</div>
　　<div class="responsive02">手机端</div>
　　<div class="responsive03">平板电脑</div>
　　<div class="responsive04">PC端</div>
　　<div class="responsive05">超大屏幕</div>
</div>
</body>
</html>

例子的 responsive.css 文件代码:

/*超小屏幕*/
@media (max-width: 479px) {
.responsive .responsive01 { display: block; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}

/*手机端*/
@media (min-width: 480px) and (max-width: 767px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: block; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}

/*平板电脑*/
@media (min-width: 768px) and (max-width: 979px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: block; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}

/*PC端*/
@media (min-width: 980px) and (max-width: 1199px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: block; }
.responsive .responsive05 { display: none; }
}

/*超大屏幕*/
@media (min-width: 1200px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: block; }
}

手机,平板,电脑,超大屏幕宽度响应式相关推荐

【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机/平板电脑设备屏幕适配 )
文章目录一.屏幕适配限定符二.手机/平板电脑设备屏幕适配平板电脑市场占有率密度无关像素计算手机设备限定符平板设备限定符参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声 ...
互联网早报：微信终于支持多设备同时在线须遵循手机+平板+电脑原则
行业热点 1.微信终于支持多设备同时在线须遵循手机+平板+电脑原则: 2.支付宝宣布推出小微商户降费举措:收钱码提现未来3年继续免费: 3.周鸿祎发布360战略目标:构建国家级的分布式安全大脑: 4 ...
USB及手机平板设备插拔响应解决方案
USB及手机平板设备插拔响应解决方案 (一).基本原理:WM_DEVICECHANGE消息响应一般WM_DEVICECHANGE只发给顶层窗口.你可以自己创建一个隐藏的顶层窗口来接收这个消息. (二 ...
手机视频连接计算机显示器播放,教您使用手机/平板电脑直接在计算机上播放视频...
我相信,在阅读了前面的教程之后,您已经在计算机上下载了许多电影和电视节目. 因此,是时候在国庆假期呆在家里了. 好吧,开个玩笑. 但是,本教程是为了使主要参与者更容易. 不必将视频复制到"手 ...
教你七招如何找Android 高分辨率手机/平板电脑游戏
分享Android平板电脑使用心得这里介绍了软件心得很多人都入手了Android 手机或者平板电脑发现自己找到游戏不是不能全屏就是秒退. 估计FC问题困扰很多新手玩家. 这里我传授几招技巧帮助大 ...
android 耳机放大,耳放PHA-3如何连接Android5.0的智能设备（手机/平板电脑）？
耳放PHA-3如何连接Android5.0的智能设备(手机/平板电脑)? 以Andrioid5.0系统的Xperia Z5连接PHA-3为例: 1.打开Xperia,使用Xperia专用数字连接线(P ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
pc端常用电脑屏幕及响应式
屏幕宽度大小排序分辨率比例和设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3) (10.4寸.12.1寸.14.1寸.15寸; ) 1280*800 (16:10 ) (1 ...
andorid程序同时支持手机平板电脑
原文链接:http://developer.android.com/guide/practices/tablets-and-handsets.html#Guidelines 基本方针这里有一些指导将 ...

手机,平板,电脑,超大屏幕宽度响应式

手机,平板,电脑,超大屏幕宽度响应式相关推荐

最新文章

热门文章

手机,平板,电脑,超大屏幕 宽度响应式

手机,平板,电脑,超大屏幕 宽度响应式相关推荐

最新文章

热门文章

手机,平板,电脑,超大屏幕宽度响应式

手机,平板,电脑,超大屏幕宽度响应式相关推荐