ie10 grid 网格布局

最新推荐文章于 2022-11-23 18:15:12 发布

唐菜也

最新推荐文章于 2022-11-23 18:15:12 发布

阅读量5.3k

点赞数

本文链接：https://blog.csdn.net/yuzhitangxiangrong/article/details/72231327

版权

目前HTML5的布局方式有很多：float，定位，弹性布局，分栏等。而在移动开发中，需要考虑到布局能够适应到不同的设备、方向和屏幕尺寸，可能还需要一些结构的更改：

网格布局是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。

通过将网格布局与媒体查询（@media）结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。

先给大家看一个例子，后面有属性介绍：

http://www.ibokanfamily.com/win8/grid/grid.html(推荐使用支持转屏的win8设备查看，如surface)

这是写完的效果图，首先是它的结构：

<body>
    <div id="grid">
        <!-- 结构的位置可以任意放置 -->
        <div id="nav" draggable="true">好吧，我是导航</div>
        <div id="tit">唐菜也</div>
        <div id="con">我是一些文本段落</

最低0.47元/天解锁文章

唐菜也

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ie10 grid 网格布局

目前HTML5的布局方式有很多：float，定位，弹性布局，分栏等。而在移动开发中，需要考虑到布局能够适应到不同的设备、方向和屏幕尺寸，可能还需要一些结构的更改：网格布局是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。通过将网格布局与媒体查询（@media）结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。
复制链接

扫一扫