不同设备下自动适应页面

不同设备下的响应式布局

开发工具与关键技术：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>

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