带有备忘录的响应式日历样式，适用于不同屏幕答案

【问题标题】：Styles of responsive calendar with memos for different screens带有备忘录的响应式日历样式，适用于不同屏幕
【发布时间】：2017-07-20 08:22:09
【问题描述】：

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

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

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

我为你创建小提琴来测试它是如何工作的：

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;，但没有帮助。

【问题讨论】：

可能对于小分辨率设备，您可以将日历用作水平滚动？？
不，我需要垂直滚动，因为日历事件可能有很长的描述。

标签： javascript jquery html css responsive-design

【解决方案1】：

我找到了解决我所有问题的方法。这是新的小提琴 - 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。

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

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

在移动模式下的外观如下：

【讨论】：