关于CSS3实现响应式布局的一些概念和术语

最新推荐文章于 2022-10-06 15:24:54 发布

前端老码农

最新推荐文章于 2022-10-06 15:24:54 发布

阅读量161

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j122h20hj&title=%E5%85%B3%E4%BA%8ECSS3%E5%AE%9E%E7%8E%B0%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E7%9A%84%E4%B8%80%E4%BA%9B%E6%A6%82%E5%BF%B5%E5%92%8C%E6%9C%AF%E8%AF%AD

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

                        
  响应式布局也被应用到网站前端开发中，在国内这一词想必是非常火吧，那网站为什么要使用响应式布局呢？ 
 
   原因和其他创意性的生活用品基本上是一样的，处于对人力物力财力的节省和对生活富有诗意的一种追求。 
 
   在人力物力和财力有限的情况下，一个网站既要功能完善，又要跟得上移动互联网的潮流（不是瞎跟风啊），那么同一套后台系统、数据库和前端代码，怎样才能满 足用户在不通场景（厕所、超市、商场、被窝）不同设备（Iphone、ipad、电视、小米、三星、华为、HTP、诺基亚等等）上都能体验到最佳的产品体 验和功能呢？ 
 
   以往（在响应式概念诞生以前）的网站或者应用是怎么处理的呢？ 
 
   最常见的办法就是基类（最常用的网站布局） 扩展类（几种不同的网站布局类）来实现不同的布局。 
 
  <!–使用说明： 
 
  网站基本布局，使用class="layout"; 
 
  使用ipad访问时，追加class="layout-ipad"; 
 
  使用iphone访问时，追加class="layout-iphone"; 
 
  使用iphone横屏访问时，追加class="layout-iphone-h"; 
 
  使用移动设备分辨率小于320px*480px访问时，追加class="layout-miscreen"; 
 
  –> 
 
   <div> 
 
   <header>header</header> 
 
   <section>main</section> 
 
   <footer>footer</footer> 
 
   </div> 
 
   针对不同布局编写不同的css代码，通过js判断设备、不同分辨率调用不同的布局样式，从而实现同一套前端Html代码适配不同设备和场景，给用户带来最佳的操作体验。 
 
   自从响应式布局的概念诞生以来，它便火了起来。 
 
  官方是这么定义响应式布局设计的： 
 
   响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 
 
   这个概念是为解决移动互联网浏览而诞生的。 
 
   响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。 
 
   用一句话来说： 
 
   使用同一套Html代码来适配不同设备和满足不同场景不同用户使用。 
 
  关键专业术语： 
 
   Media Query（css3媒介查询） 
 
  语法结构及用法： 
 
        @media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules} 
       
        实际应用一 判断设备横竖屏： 
       
        /* 这是匹配横屏的状态，横屏时的css代码 */ 
       
        @media  
        all  
        and (orientation : 
        landscape 
        ){} 
       
        /* 这是匹配竖屏的状态，竖屏时的css代码 */ 
       
        @media  
        all  
        and (orientation : 
        portrait 
        ){} 
       
        实际应用二 判断设备类型： 
       
        @media X and ( 
        min-width 
        : 
        200px 
        ){} 
       
        X为设备类型》比如 
        print 
        / 
        screen 
        /TV等等 
       
        实际应用三 判断设备宽高： 
       
        /* 宽度大于600px小于960之间时，隐藏footer结构 */ 
       
        @media  
        all  
        and ( 
        min-height 
        : 
        640px 
        ) and ( 
        max-height 
        : 
        960px 
        ){ 
       
        footer{ 
        display 
        : 
        none 
        ;} 
       
        } 
       
  实际应用四 判断设备像素比： 
 
        /* 像素比为1时，头部颜色为绿色 */ 
       
        .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 
        ;} } 
       
        /* 像素比为1.5时，头部背景为红色 */ 
       
        @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 
        ;} } 
       
        /*像素比为2，头部背景为蓝色 */ 
       
        @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上的应用或者网站。这样响应式才会做的更合理更人性化。

前端老码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS3实现响应式布局的一些概念和术语

响应式布局也被应用到网站前端开发中，在国内这一词想必是非常火吧，那网站为什么要使用响应式布局呢？原因和其他创意性的生活用品基本上是一样的，处于对人力物力财力的节省和对生活富有诗意的一种追求。在人力...
复制链接

扫一扫

专栏目录