自适应布局--媒体查找

最新推荐文章于 2024-04-05 18:00:24 发布

金戈_旭日东升

最新推荐文章于 2024-04-05 18:00:24 发布

阅读量169

点赞数

分类专栏： VUE 前端 Uni-app

本文链接：https://blog.youkuaiyun.com/fang156239305/article/details/114530559

版权

VUE 前端同时被 2 个专栏收录

22 篇文章

订阅专栏

Uni-app

5 篇文章

订阅专栏

<template>
	<view id="div0">
		<view>1</view>
		<view>2</view>
		<view>3</view>
	</view>
</template>

<style>
   #div0{
	   display: flex;
   }
   #div0 view:first-child{
	   background-color:  #F0AD4E;
	   flex: 0 0 50px;
   }
   #div0 view:nth-child(2){
   	   background-color: #FFFFFF;
	    flex: 1 1 auto;
   }
   #div0 view:nth-child(3){
   	   background-color: #F0AD4E;
	    flex: 0 0 50px;
   }

  @media  (min-device-width:300px) and (min-device-width:400px){
	   #div0 view:nth-child(2){
	   	   background-color: #007AFF
	   }
   }
   
   @media  (min-device-width:401px) and (min-device-width:600px){
   	   #div0 view:nth-child(2){
   	   	   background-color:#4CD964
   	   }
   
   }
   	
   
</style>