【前端响应式】栅格基础原理及实现

最新推荐文章于 2024-07-10 18:06:50 发布

前端二狗子

最新推荐文章于 2024-07-10 18:06:50 发布

阅读量384

点赞数

分类专栏： # 移动端文章标签： css css3

本文链接：https://blog.csdn.net/qq_34838046/article/details/108562596

版权

功能1：基础响应式栅格

float + 百分比宽度

功能2：列偏移

margin

功能3：多种设备不同样式

媒体查询media

功能4：列排序

float设置为right

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./col.css" />
    <link rel="stylesheet" href="./offset.css" />
    <style>
      * {
    
        padding: 0;
        margin: 0;
      }
        .col-1 {
     float: left; width: 8.33%; }
        .col-2 {
     float: left; width: 16.66%; }
        .col-3 {
     float: left; width: 25%; }
        .col-4 {
     float: left; width: 33.33%; }
        .col-5 {
     float: left; width: 41.66%; }
        .col-6 {
     float: left; width: 50%; }
        .col-8 {
     float: left; width: 58.33%; }
        .col-9 {
     float: left; width: 75%; }
        .col-10 {
     float: left; width: 83.33%; }
        .col-11 {
     float

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端二狗子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端响应式】栅格基础原理及实现

功能1：基础响应式栅格float + 百分比宽度功能2：列偏移margin功能3：多种设备不同样式媒体查询media功能4：列排序float设置为right例子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫