What is responsive? Detailed introduction to responsive layout

This article brings you the content about what is responsiveness? The detailed introduction of responsive layout has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Responsive

Responsive: Make corresponding adjustments to the style of the content on the page according to different devices, different widths, and different characteristics

媒询  媒体查询
    显示设备

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

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

    and  用来链接多个查询条件

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

Write one Range, use this style within this range

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

Responsive-pixel ratio

媒体特性；
    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>

Multiple writing methods introduced by responsiveness

  @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样式表 */

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

Percent layout

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

When the value is given as a percentage, who will calculate it
width is calculated based on the width of the parent
height is calculated based on the height of the parent
margin is always calculated based on the width of the parent
top Calculated based on the height of the (Positioning_Absolute Positioning) parent
left Calculated based on the width of the (Positioning_Absolute Positioning) parent
padding Calculated based on the width of the parent
translatX,Y Based on its own Calculate the width and height
The expression method of line height: font:20px/1.2 '宋体'; means 1.2 times the text size

The above is the detailed content of What is responsive? Detailed introduction to responsive layout. For more information, please follow other related articles on the PHP Chinese website!