• 学生问的一道CSS3媒体查询，实现响应式设计的题

    目录

     

    题目要求：

    解题思路：

    解题：

    1）大屏、3个DIV水平排列

    2）中屏、前2个DIV水平占一半，第三个另起一行，宽度占满

    3）小屏，3个DIV铺满，垂直排列

     

    题目要求：

    最近有同学问道，如何实现大屏幕的时候，3个DIV水平排列，屏幕小一些的时候，前2个DIV水平排列，第3个DIV元素去到第二行，并且第3个DIV元素铺满屏幕。屏幕再小一些的时候，3个DIV元素垂直排列，都铺满屏幕。

    解题思路：

     这不正好可以利用一下CSS3的媒体查询嘛，我们设定一个屏幕最小宽度，当大于这个宽度的时候，对CSS样式做一次设定；再设定第二个最小宽度，这个时候再对3个单独做一次设定；最后再设定第三个最大宽度，将3个DIV元素垂直排列就好啦。

    解题：

    1）大屏、3个DIV水平排列

    以最小宽度1080px为基准，设定3个DIV元素水平排列

    1. html>
    2. <html>
    3.     
    4.         8" />
    5.         
    6.         
    7.     
    8.     <body>
    9.         <div class="box1">
    10.             <div>div>
    11.             <div>div>
    12.             <div>div>
    13.         div>
    14.     body>
    15. html>

    1e1471c3cc9a462091413abdf32c9f53.png

     

    2）中屏、前2个DIV水平占一半，第三个另起一行，宽度占满

    以750px到1080px为范围值，我们给父元素设定了超出宽度换行排列，同时对第3个DIV元素做了宽度设置

    1. html>
    2. <html>
    3.     
    4.         8" />
    5.         
    6.         
    7.     
    8.     <body>
    9.         <div class="box1">
    10.             <div class="inner1">div>
    11.             <div class="inner2">div>
    12.             <div class="inner3">div>
    13.         div>
    14.     body>
    15. html>

    0e8dcd586bcb4b1eb7611f6660449d62.png

    3）小屏，3个DIV铺满，垂直排列

     以750为最大阈值，做其余部分的垂直排列工作。

    1. DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <title>title>
    6.         <style>
    7.             html, body {
    8.                 margin: 0;
    9.                 padding: 0;
    10.             }
    11.             .box1 {
    12.                 display: flex;
    13.                 width: 100%;
    14.             }
    15.             .box1>div {
    16.                 height: 300px;
    17.                 background: grey;
    18.             }
    19.             .box1>div:first-child {
    20.                 margin-left: 0;
    21.             }
    22.             @media screen and (min-width: 1080px) {
    23.                 .box1>div {
    24.                     margin-left: 5%;
    25.                     width: 30%;
    26.                 }
    27.             }
    28.             @media screen and (min-width: 750px) and (max-width: 1080px) {
    29.                 .box1 {
    30.                     flex-direction: row;
    31.                     flex-wrap: wrap;
    32.                 }
    33.                 .inner1, .inner2 {
    34.                     width: 47.5%;
    35.                 }
    36.                 .inner2 {
    37.                     margin-left: 5%;
    38.                 }
    39.                 .inner3 {
    40.                     margin-top: 50px;
    41.                     width: 100%;
    42.                 }
    43.             }
    44.             @media screen and (max-width: 750px) {
    45.                 .box1 {
    46.                     flex-direction: row;
    47.                     flex-wrap: wrap;
    48.                 }
    49.                 .box1>div {
    50.                     margin-top: 50px;
    51.                     width: 100%;
    52.                 }
    53.             }
    54.         style>
    55.     head>
    56.     <body>
    57.         <div class="box1">
    58.             <div class="inner1">div>
    59.             <div class="inner2">div>
    60.             <div class="inner3">div>
    61.         div>
    62.     body>
    63. html>

    2f799cc6167844dead0a61a89ae8d6f5.png

     

  • 相关阅读:
    网络侦察及其防御技术研究综述
    关于Synchronized你了解多少？
    react小记/基本语法/reactjs整理(持续更新)
    LeetCode简单题之第一个出现两次的字母
    数据治理中最常听到的名词有哪些？
    2030：【例4.16】找素数 （信奥一本通）
    详解MySQL隔离级别
    Linux下的自动化构建工具之make/makefile的用法详解
    【openwrt学习笔记】Dying Gasp功能和pstore功能的配置（高通 ipq95xx）
    分享好用的Cloudflare测速文件
  • 原文地址：https://blog.csdn.net/xingyu_qie/article/details/139470742