欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

什么是响应式?响应式布局的详细介绍

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

本篇文章给大家带来的内容是关于什么是响应式?响应式布局的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

响应式

响应式:根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整

媒询  媒体查询
    显示设备

    @media
        只有满足所有查询条件的时候,里面的样式才会被解析

    all         所有媒体
    braille     盲文触觉设备
    embossed    盲文打印机
    print       手持设备
    projection  打印预览
    screen      彩屏设备
    speech      ‘听觉’类似的媒体类型
    tty         不适用像素的设备
    tv          电视

    and  用来链接多个查询条件

    min-width :  大于等于
    max-width:   小于等于

写一个范围,在这个范围内使用这种样式

 <style>
        @media screen and (min-width:1000px) and (max-width:1300px){            
        .box{                
        width:100px;                
        height: 100px;                
        background: #333333;            
        }
        }    
</style>

响应式-像素比

媒体特性;
    min-width:1000px  当屏幕宽度大于等于1000的时候会被解析
    max-width:1300px  当屏幕宽度小于等于1300的时候会被解析

    -webkit-min-device-pixel-ratio  最小像素比
    -webkit-max-device-pixel-ratio  最大像素比

    orientation:portrait  
    (指定输出设备中的页面可见区域高度大于或等于宽度)
    orientation:landscape
    (除portrait值情况外,都是landscape)
<style>
        @media (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){
                    .box{           
                             width:100px;                   
                             height: 100px;                    
                             background: #333333;            
                        }
        }   
</style>

响应式引入的多种写法

  @import "Css/a.Css" all and (min-width:800px);
        /* 宽度满足800-999的时候,只会引入a.Css样式表 *        
        @import "Css/b.Css" all and (min-width:1000px);
        /* 宽度满足1000-1199的时候,会同时引入a和b.Css这两个样式表,后者覆盖前者 *        
        @import "Css/c.Css" all and (min-width:1200px);        
        /* 宽度满足1200的时候,会同时引入a和b、c.Css这三个样式表,后者覆盖前者 */
        /* 同时会满足多个样式的查询条件,这种方式引入样式表要注意样式表的顺序 */
 @import "Css/a.Css" all and (min-width:800px) and (max-width:999px);        
 /* 宽度满足800-999的时候,只会引入a.Css样式表 */
        @import "Css/b.Css" all and (min-width:1000px) and (max-width:1199px);        
        /* 宽度满足1000-1199的时候,引入b.Css样式表*/
        @import "Css/c.Css" all and (min-width:1200px);        
        /* 宽度满足1200的时候,引入c.Css样式表 */

        /* 因为同时只会满足一个样式表的查询条件,所以不需要太注意顺序 */

百分比布局

<style>
        .box{        
            width:100%;        
           }

        .item_long{          
          width:100%;        
          }

        .item_long img{     
               width:100%;        
               }

        .item{         
           width:46%;            
           height:270px;            
           float: left;        
           }

        .item:nth-child(even){     
               float: right;        
               }
        .item img{           
         width:100%;        
         }
    </style>
 <!--百分比布局适用于  布局不会发生改变  并且要求看到左右的内容-->

当值给百分比的时候,根据谁来计算
width 根据父级的宽度来来计算
height 根据父级的高度
margin 始终根据父级的宽度来计算
top 根据(定位_绝对定位)父级的高度来计算
left 根据(定位_绝对定位)父级的宽度来计算
padding根据父级的宽度来计算
translatX,Y 根据自身的宽高来计算
行高的表示方法 : font:20px/1.2 ‘宋体’; 表示文字大小的1.2倍

本文地址:http://itbyc.com/web/html5/20352.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1