javascript - 具有适用于不同屏幕的备忘录的响应式日历样式

Question

我为每一天创建了带有备忘录的响应式日历。它们都工作正常，但只有 2 个分辨率。在我的 1024x768 小显示器上，它显示如下:

当我像这样在智能手机上设置屏幕尺寸时

所以一切正常，但是当我尝试设置不同的分辨率时，一切都像这样乱七八糟:

我为您创建了 fiddle 来测试它是如何工作的:

https://jsfiddle.net/skyr9999/fgmyy0xh/

这是 HTML:

<div class="result">
    <div class="flexcell flexheader" style="order:0;">Sunday</div>
    <div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
    <div class="flexcell" style="order:2;"><div>2</div><div class="flexmemo">6bx1z<br>p7pzm</div></div>
    <div class="flexcell" style="order:3;"><div>9</div><div class="flexmemo">oxcwe<br>m32dj</div></div>
    <div class="flexcell" style="order:4;"><div>16</div><div class="flexmemo">kvti5<br>0ee4a</div></div>
    <div class="flexcell" style="order:5;"><div>23</div><div class="flexmemo">foy0a<br>9jvcl</div></div>
    <div class="flexcell" style="order:6;"><div>30</div><div class="flexmemo">cw18e<br>52zdx</div></div>

    <div class="flexcell flexheader" style="order:0;">Monday</div>
    <div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
    <div class="flexcell" style="order:2;"><div>3</div><div class="flexmemo">xf268<br>jmpri</div></div>
    <div class="flexcell" style="order:3;"><div>10</div><div class="flexmemo">yxo68<br>2jefb</div></div>
    <div class="flexcell" style="order:4;"><div>17</div><div class="flexmemo">q7t6m<br>6hxat</div></div>
    <div class="flexcell" style="order:5;"><div>24</div><div class="flexmemo">lw1vw<br>xjwhv</div></div>
    <div class="flexcell emptyflex" style="order:6;">&nbsp;</div>

    <div class="flexcell flexheader" style="order:0;">Tuesday</div>
    <div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
    <div class="flexcell" style="order:2;"><div>4</div><div class="flexmemo">blor2<br>qu7dv</div></div>
    <div class="flexcell" style="order:3;"><div>11</div><div class="flexmemo">2wh4y<br>23jcv</div></div>
    <div class="flexcell" style="order:4;"><div>18</div><div class="flexmemo">889b0<br>e3a4g</div></div>
    <div class="flexcell" style="order:5;"><div>25</div><div class="flexmemo">xktij<br>8pvvb</div></div>
    <div class="flexcell emptyflex" style="order:6;">&nbsp;</div>

    <div class="flexcell flexheader" style="order:0;">Wednesday</div>
    <div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
    <div class="flexcell" style="order:2;"><div>5</div><div class="flexmemo">d5o0g<br>uhpf0</div></div>
    <div class="flexcell" style="order:3;"><div>12</div><div class="flexmemo">wfc8q<br>h7x8k</div></div>
    <div class="flexcell" style="order:4;"><div>19</div><div class="flexmemo">mdgjq<br>2l79i</div></div>
    <div class="flexcell" style="order:5;"><div>26</div><div class="flexmemo">828s2<br>8xphv</div></div>
    <div class="flexcell emptyflex" style="order:6;">&nbsp;</div>

    <div class="flexcell flexheader" style="order:0;">Thursday</div>
    <div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
    <div class="flexcell" style="order:2;"><div>6</div><div class="flexmemo">02byv<br>lrase</div></div>
    <div class="flexcell" style="order:3;"><div>13</div><div class="flexmemo">zmmsa<br>6b61x</div></div>
    <div class="flexcell" style="order:4;"><div>20</div><div class="flexmemo">bzvgg<br>jp0zq</div></div>
    <div class="flexcell" style="order:5;"><div>27</div><div class="flexmemo">0vrjg<br>tnu02</div></div>
    <div class="flexcell emptyflex" style="order:6;">&nbsp;</div>

    <div class="flexcell flexheader" style="order:0;">Friday</div>
    <div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
    <div class="flexcell" style="order:2;"><div>7</div><div class="flexmemo">z065b<br>9noqk</div></div>
    <div class="flexcell" style="order:3;"><div>14</div><div class="flexmemo">ptox9<br>33omv</div></div>
    <div class="flexcell" style="order:4;"><div>21</div><div class="flexmemo">vs1t3<br>glq3h</div></div>
    <div class="flexcell" style="order:5;"><div>28</div><div class="flexmemo">he9ut<br>30sav</div></div>
    <div class="flexcell emptyflex" style="order:6;">&nbsp;</div>

    <div class="flexcell flexheader" style="order:0;">Saturday</div>
    <div class="flexcell" style="order:1;"><div>1</div><div class="flexmemo">g2rjt<br>0u6ea</div></div>
    <div class="flexcell" style="order:2;"><div>8</div><div class="flexmemo">nhyrv<br>8sext</div></div>
    <div class="flexcell" style="order:3;"><div>15</div><div class="flexmemo">mfmnw<br>uzsf6</div></div>
    <div class="flexcell" style="order:4;"><div>22</div><div class="flexmemo">7qjsk<br>akvm5</div></div>
    <div class="flexcell" style="order:5;"><div>29</div><div class="flexmemo">2xh8z<br>vgoxz</div></div>
    <div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
</div>

和CSS:

.result{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
    border-collapse: collapse;
}


.flexcell
{
    border: 1px #003E9D solid;

    display : block;    
    width : 130px !important;
    max-width : 130px !important;
    background: #a9cbff;
    color: #000;
    text-align: center;
    font-size : 1em;

}

@media all and (max-width: 500px) {
    .result  {
        display: block;
    }  
    .flexcell { 
        width: 100% !important; 
        max-width : 100% !important; 
        font-size : 1.5em;

    }

    .flexheader    {
        margin-top: 10px;
    }

    .emptyflex {
        display: none;
    }

}

.flexheader
{
    background: #4d8dec;
    color: #fff;
    font-weight: bold;
    text-align: center;

}

.flexmemo
{
    background: #fff;
    color: #000;
    text-align: center;

}

.emptyflex {
    background: #fff;
}

如何解决这个问题？我只希望日历以中等分辨率显示在两列中，如下所示:

Sun     Mon
Tue     Wed
Thu     Fri
    Sat

或

Sun     Mon     Tue
Wed     Thu     Fri
        Sat

更新1

您可能还会注意到单元格之间的双边框，我该如何去除它？我设置了 border-collapse: collapse; 但它没有帮助。

Answer 1

我找到了所有问题的解决方案。这是新的 fiddle - https://jsfiddle.net/skyr9999/q78qeuh6/

这是 html:

<div class="result">
<div class="flexcell flexheader" style="order:0;">Sunday</div>
<div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
<div class="flexcell" style="order:2;"><div>2</div><div class="flexmemo">k5gt2</div><div class="flexmemo_descr">l7ji6reqj2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">qgx2v</div><div class="flexmemo_descr">rgurtcoux Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>9</div><div class="flexmemo">4e3q2</div><div class="flexmemo_descr">7dlvn2brr5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">ux2qm</div><div class="flexmemo_descr">mo61rw5dvk Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>16</div><div class="flexmemo">s090e</div><div class="flexmemo_descr">wkr2dy82z6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">b521k</div><div class="flexmemo_descr">6w1mf5h9yk Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>23</div><div class="flexmemo">lc3qf</div><div class="flexmemo_descr">41ubvns725 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">zn7p2</div><div class="flexmemo_descr">dt7lwzfou1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:6;"><div>30</div><div class="flexmemo">lx9pi</div><div class="flexmemo_descr">vahnkgfato Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">7lpwz</div><div class="flexmemo_descr">r15hicpr7v Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell flexheader" style="order:0;">Monday</div>
<div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
<div class="flexcell" style="order:2;"><div>3</div><div class="flexmemo">n6hpd</div><div class="flexmemo_descr">0gn7rqtslo Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">iwwcd</div><div class="flexmemo_descr">fxkbq8u9t3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>10</div><div class="flexmemo">rgter</div><div class="flexmemo_descr">4am7busdae Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">f6xoo</div><div class="flexmemo_descr">weipkj277m Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>17</div><div class="flexmemo">h8x8e</div><div class="flexmemo_descr">fhux75ysfp Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">4sqmf</div><div class="flexmemo_descr">vfmxy2oz1d Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>24</div><div class="flexmemo">cqv9z</div><div class="flexmemo_descr">h54cj317mt Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">vwoh1</div><div class="flexmemo_descr">8pgqthw52v Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
<div class="flexcell flexheader" style="order:0;">Tuesday</div>
<div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
<div class="flexcell" style="order:2;"><div>4</div><div class="flexmemo">wv042</div><div class="flexmemo_descr">rjoxwsxr0b Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">41q80</div><div class="flexmemo_descr">h0q1ydv0lq Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>11</div><div class="flexmemo">bt1tg</div><div class="flexmemo_descr">gika1qzll3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">9y31x</div><div class="flexmemo_descr">cl93sgg4rb Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>18</div><div class="flexmemo">k1edi</div><div class="flexmemo_descr">eyixoe9t91 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">r9vnt</div><div class="flexmemo_descr">tu71nqec6w Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>25</div><div class="flexmemo">5xb3c</div><div class="flexmemo_descr">qkx8oiqu46 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">r7aqi</div><div class="flexmemo_descr">x04y3feo2v Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
<div class="flexcell flexheader" style="order:0;">Wednesday</div>
<div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
<div class="flexcell" style="order:2;"><div>5</div><div class="flexmemo">drh8f</div><div class="flexmemo_descr">a3qo2izrth Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">zslyq</div><div class="flexmemo_descr">qjmv9n636x Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>12</div><div class="flexmemo">gwf1g</div><div class="flexmemo_descr">sxn9i4dnwl Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">wlonp</div><div class="flexmemo_descr">lr06ab23sh Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>19</div><div class="flexmemo">09pt8</div><div class="flexmemo_descr">p19eopr5c8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">yuwq0</div><div class="flexmemo_descr">pjzsp6taln Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>26</div><div class="flexmemo">wp33o</div><div class="flexmemo_descr">oayes97paq Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">4d6l5</div><div class="flexmemo_descr">mfqn593ip2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
<div class="flexcell flexheader" style="order:0;">Thursday</div>
<div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
<div class="flexcell" style="order:2;"><div>6</div><div class="flexmemo">iefmy</div><div class="flexmemo_descr">myqwq1vilg Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">xl1w5</div><div class="flexmemo_descr">g68vygf1xn Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>13</div><div class="flexmemo">nq2ph</div><div class="flexmemo_descr">28pnbsh5rb Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">6py0e</div><div class="flexmemo_descr">vrywf8mjj2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>20</div><div class="flexmemo">npqvj</div><div class="flexmemo_descr">1bq3eqsog8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">gpvkx</div><div class="flexmemo_descr">6jac4zs8rq Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>27</div><div class="flexmemo">saild</div><div class="flexmemo_descr">ocksoegil6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">0isve</div><div class="flexmemo_descr">i9ynpnm4ij Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
<div class="flexcell flexheader" style="order:0;">Friday</div>
<div class="flexcell emptyflex" style="order:1;">&nbsp;</div>
<div class="flexcell" style="order:2;"><div>7</div><div class="flexmemo">v3ecs</div><div class="flexmemo_descr">lzhbc3mzmx Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">a90es</div><div class="flexmemo_descr">pby708tqs0 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>14</div><div class="flexmemo">05768</div><div class="flexmemo_descr">da999igfpx Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">4r1hk</div><div class="flexmemo_descr">ourtd9c95i Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>21</div><div class="flexmemo">85531</div><div class="flexmemo_descr">rpj58r16x7 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">dr12v</div><div class="flexmemo_descr">9cmw4kpzl8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>28</div><div class="flexmemo">h2ue8</div><div class="flexmemo_descr">09n7vnv14b Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">1xm5o</div><div class="flexmemo_descr">0rhye0lloj Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
<div class="flexcell flexheader" style="order:0;">Saturday</div>
<div class="flexcell" style="order:1;"><div>1</div><div class="flexmemo">bx9fu</div><div class="flexmemo_descr">s8a5rdck48 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">3oyve</div><div class="flexmemo_descr">7evqofowa7 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:2;"><div>8</div><div class="flexmemo">dfqyd</div><div class="flexmemo_descr">252sa2sqxs Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">332hy</div><div class="flexmemo_descr">537g6wqgpj Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:3;"><div>15</div><div class="flexmemo">1pqm9</div><div class="flexmemo_descr">virobvg1f Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">z88gm</div><div class="flexmemo_descr">4u1x12me3n Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:4;"><div>22</div><div class="flexmemo">bff2h</div><div class="flexmemo_descr">ztwhqeny32 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">6zd92</div><div class="flexmemo_descr">k8uicbk937 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell" style="order:5;"><div>29</div><div class="flexmemo">1evyp</div><div class="flexmemo_descr">mxz3s88rto Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div><div class="flexmemo">qogmh</div><div class="flexmemo_descr">fx4d14qvwu Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></div>
<div class="flexcell emptyflex" style="order:6;">&nbsp;</div>
</div>

和CSS:

.result{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
    border-collapse: collapse;
}


.flexcell
{
    border: 1px #003E9D solid;

    display : block;    
    width : 14% !important;
    max-width : 14% !important;
    background: #a9cbff;
    color: #000;
    text-align: center;
    font-size : 1em;

    border-collapse: collapse;
    margin: -1px;

}

.flexmemo_descr
{
    display: none;
}

.flexmemo
{
    background: #fff;
    color: #000;
    text-align: center;
}

.emptyflex {
    background: #fff;
}


@media all and (max-width: 370px) {
    .result  {
        display: block;
        margin-right: 5px;
    }  
    .flexcell { 
        width: 100% !important; 
        max-width : 100% !important; 
        font-size : 1.5em;

    }

    .flexheader    {
        margin-top: 20px;
    }

    .emptyflex {
        display: none;
    }

    .flexmemo_descr
    {
        display: block;
        background: #fff;
        color: #000;
        text-align:justify;
        padding: 5px;
    }

    .flexmemo
    {
        padding-top: 15px;
        background: #fff;
        border-bottom: 1px #000 dotted;
        color: #000;
        text-align: center;
    }

    .emptyflex {
        background: #fff;
    }


}

@media all and (min-width: 370px) and (max-width:539px) {
    .result  {
        margin-right: -10px;
        font-size: 0.7em;
    }  
    .flexcell { 
        width : 13.6% !important;
        max-width : 13.6% !important;
    }

}


@media all and (min-width: 540px) and (max-width: 720px) {
    .result  {
        margin-right: -10px;
    }  
    .flexcell { 
        width : 13.9% !important;
        max-width : 13.9% !important;
    }

}

@media all and (min-width: 721px) and (max-width: 1099px) {
    .result  {
        margin-right: -10px;
    }  
    .flexcell { 
        width : 14% !important;
        max-width : 14% !important;
    }

}



@media all and (min-width: 1100px) and (max-width: 1485px) {
    .result  {
        margin-right: -10px;
    }  
    .flexcell { 
        width : 14.1% !important;
        max-width : 14.1% !important;
    }

}


@media all and (min-width: 1486px) and (max-width: 1920px) {
    .result  {
        margin-right: -10px;
    }  
    .flexcell { 
        width : 14.15% !important;
        max-width : 14.15% !important;
    }

}

.flexheader
{
    background: #4d8dec;
    color: #fff;
    font-weight: bold;
    text-align: center;

}

为了解决缩放问题，我使用 FireFox 自适应设计模式和缩放页面来查找表格开始困惑的点，并为此宽度范围创建特殊的 css。

对于移动分辨率 View ，我创建了单独的样式来显示完整描述。

为了解决双框问题，我只是为所有单元格设置 margin: -1px;。

这是它在移动模式下的样子: