HTML多端适应响应式布局案例

朴灿烈づ我的快乐病毒、 2022-12-24 10:50 93阅读 0赞

### HTML布局： ###

### CSS代码： ###

### 设置视口： ###

PC端：

/* pc */
    @media only screen and (min-width: 600px)  {
    	.aa{
    		width: calc(94%/4);
    		margin-left: 2%;
    		height: 200px;
    		margin-top: 10px;
    	}
    	.aa:nth-child(4n+1){
    		margin-left: 0;
    	}
    }

iPad端：

/*ipad*/
    @media only screen and (min-width: 300px) and (max-width: 600px) {
    	.aa{
    		
    		width: calc(98%/2);
    		margin-left: 2%;
    		height: 200px;
    		margin-top: 10px;
    		
    	}
    	.aa:nth-child(2n+1){
    		margin-left: 0;
    	}
    }

手机端：

/*phone*/
    @media only screen and (min-width: 0px) and (max-width: 300px) {
    	.aa{
    		width: 100%;
    		margin-left: 0;
    		height: 200px;
    		margin-top: 10px;
    	}
    }

## ##

### PC端效果（呈4排显示）： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

### iPad端效果（双排显示）： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1][] ###

### Android端效果（单排显示）： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/7ebdac339d38425eb8c5f966ac0de8c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201127182518312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201127182548520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70