반응형이란 무엇인가요? 반응형 레이아웃에 대한 자세한 소개

이 기사에서는 반응성이 무엇인지에 대한 내용을 제공합니다. 반응형 레이아웃에 대한 자세한 소개는 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

반응형

반응형: 다양한 장치, 다양한 너비, 다양한 기능에 따라 페이지의 콘텐츠 스타일을 적절하게 조정합니다.

媒询  媒体查询
    显示设备

    @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>
 <!--百分比布局适用于  布局不会发生改变  并且要求看到左右的内容-->

값이 백분율로 주어지면 누가 계산하나요?
너비는 부모의 너비를 기준으로 계산됩니다.
높이는 부모의 너비를 기준으로 합니다.
margin은 항상 상위 항목의 너비를 기준으로 계산됩니다.
top은 (positioning_absolute 위치 지정) 상위 항목의 높이를 기준으로 계산됩니다.
left는 (positioning_absolute 위치 지정) 상위 항목의 너비를 기준으로 계산됩니다.
padding은 너비를 기준으로 계산됩니다.
translatX,Y를 자체 너비와 높이를 기준으로 계산합니다.
줄 높이 표현 방법: 글꼴:20px/1.2 '宋体'은 텍스트 크기의 1.2배를 의미합니다

위 내용은 반응형이란 무엇인가요? 반응형 레이아웃에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!