登录  /  注册

css3媒体查询实现网站响应式布局_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:33:09
原创
1145人浏览过

响应式建筑设计、响应式家具设计、响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词。


 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?


 这样既节约制造成本,又节省空间,还能体验创意性的生活。 


没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床、沙发座椅是我们见过再平常不过的家具了。


 我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力。而是什么驱动他们去想象进而去创造呢? 


节省物料成本、节省人力财力成本、节省五六万一平的家居空间、享受富有创意的生活、住的更加舒适、用最强有力的一面应对随时会变的场景。


 可能是因为人类本来就是一个比较懒和挑的动物,所以才会去想法设法的创造让人惊奇而又实用的东西出来。 


大黄蜂机器人、沙发椅或者是沙发床等等更多让我们惊奇的东西,它们都或多或少的将响应式设计的思想融入到了产品当中。 


同样响应式布局也被应用到网站前端开发中,在国内这一词想必是非常火吧,那网站为什么要使用响应式布局呢? 


原因和其他创意性的生活用品基本上是一样的,处于对人力物力财力的节省和对生活富有诗意的一种追求。


 在人力物力和财力有限的情况下,一个网站既要功能完善,又要跟得上移动互联网的潮流(不是瞎跟风啊),那么同一套后台系统、数据库和前端代码,怎样才能满足用户在不通场景(厕所、超市、商场、被窝)不同设备(Iphone、ipad、电视、小米、三星、华为、HTP、诺基亚等等)上都能体验到最佳的产品体验和功能呢?


 以往(在响应式概念诞生以前)的网站或者应用是怎么处理的呢?


 最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局。 



 网站基本布局,使用class="layout";


使用ipad访问时,追加class="layout-ipad";


使用iphone访问时,追加class="layout-iphone";


使用iphone横屏访问时,追加class="layout-iphone-h";


使用移动设备分辨率小于320px*480px访问时,追加class="layout-miscreen";


针对不同布局编写不同的css代码,通过js判断设备、不同分辨率调用不同的布局样式,从而实现同一套前端Html代码适配不同设备和场景,给用户带来最佳的操作体验。 


自从响应式布局的概念诞生以来,它便火了起来。 


官方是这么定义响应式布局设计的: 


响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端――而不是为每个终端做一个特定的版本。


这个概念是为解决移动互联网浏览而诞生的。


 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。 


用一句话来说:


使用同一套Html代码来适配不同设备和满足不同场景不同用户使用。 


关键专业术语:


Media Query(css3媒介查询) 


语法结构及用法:


@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules} 


实际应用一 判断设备横竖屏:


 @media all and (orientation :landscape){} 


 @media all and (orientation :portrait){}


实际应用二 判断设备类型:


@media X and (min-width:200px){} 


 X为设备类型》比如print/screen/TV等等


实际应用三 判断设备宽高:


@media all and (min-height:640px) and (max-height:960px){


    footer{display:none;}



实际应用四 判断设备像素比:


.header { background:red;display:block;}或


@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio:1) {


 .header{background:green;} } 


@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio:1.5) {


 .header{background:red;} }


@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2){


 .header{background:blue;} }  


关于设备像素比, 您可以参考:


HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO?


Device pixel density tests What's My Device Pixel Ratio?


PPI、设备像素比devicePixelRatio简单介绍、 在各种高分辨率设备中使用像素 


开发中,可使用Chrome emulation模拟移动设备的真实具体参数值。


 关于Chrome Emulation可参考之前 《Chrome Emulation-移动设备特性随意配》一文。 


了解了这些,那么在国内到底有多少网站有应用到响应式布局呢?有一淘、淘宝、优酷等等。


 国外响应式网站非常多了,个人亲身感受和熟悉的最典型网站就是WordPress系统了。 


还是开头说的那样,响应式布局不是赶潮流,而是有这样的一批用户需要――处于为用户在不同的场景(拉粑粑的时候)不同的设备(某国产山寨主流机))浏览网页时考虑的目的,使得他们能像操作PC端网页一样的自然去操作移动设备中的网页,甚至是TV上的应用或者网站。这样响应式才会做的更合理更人性化。 


智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号