不同设备下自动适应页面

不同设备下的响应式布局


开发工具与关键技术:Visual Studio 


撰写时间:6月18号  

作者:  曾子千  

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~     一、不同的设备上,显示屏的大小都有所不同,如果按照原来的方法来固定页面长宽高来布局页面,那它只有在你布局的页面才会100%的适用,在其他显示屏可能会显示,也有可能在其他显示屏上页面错乱,页面崩溃!响应式布局就可以轻而一举的解决这个问题!

 

二、       
布局前,先引入它的CSS-layui.CSS样式,下面开始写

代码:这是我们的页面布局在不同(移动设备:xs、平板:sm、桌面端:md)的不同表现:

<divclass=”container”> 

<divclass="row">

<divclass=" col-xs6 col-sm6 col-md4">

手机显示占6/12 | 平板电脑占6/12 | 大型电脑桌面占占4/12

</div>

<divclass=" col-xs6 col-sm6 col-md4">

手机显示占6/12 | 平板电脑占6/12 | 桌面占4/12

</div>

<divclass="col-xs4 col-sm12 col-md4">

手机显示占4/12 | 平板电脑占12/12 | 大型电脑桌面占4/12

</div>

<divclass="col-xs4 col-sm7 col-md8">

手机显示占4/12 | 平板电脑占7/12 | 大型电脑桌面占8/12

</div>

<divclass="col-xs4 col-sm5 col-md4">

手机显示占4/12 | 平板电脑占-5/12 | 大型电脑桌面占4/12

</div>     

</div>

</div>

实现布局后,可自动在不同的设备显示屏上自动适应大小,保持页面布局不会崩溃!


 
 
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 

 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值