Lillian-RWD-Framework/lillian.css at master · ayuhamaro/Lillian-RWD-Framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
.row{
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
    font-family: FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
}
.opera-only :-o-prefocus,.row{word-spacing: -0.43em}
.row > *{
    font-size: medium;
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}
.row > dt{ display: block; }  /* 修正對dt元素的影響 */
.row-block > dt{ display: block; }  /* 修正對dt元素的影響 */
.flex-row{  /*彈性列模式*/
    display: table;
    width: 100%;
}
.flex-row > *{
    display: table-cell;
}
/* 區塊元素樣式定義 */
.block1{ width: 6.25%; }
.block2{ width: 12.5%; }
.block3{ width: 18.75%; }
.block4{ width: 25%; }
.block5{ width: 31.25%; }
.block6{ width: 37.5%; }
.block7{ width: 43.75%; }
.block8{ width: 50%; }
.block9{ width: 56.25%; }
.block10{ width: 62.5%; }
.block11{ width: 68.75%; }
.block12{ width: 75%; }
.block13{ width: 81.25%; }
.block14{ width: 87.5%; }
.block15{ width: 93.75%; }
.block16{ width: 100%; }
.block-center{ margin: 0 auto; }
.block-in-center{
    text-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
}
.block-in-center > *{
    text-align: left;
}
/* 響應式切換定義-網格合併 */
@media screen and (min-width: 1px) and (max-width: 480px){
    .block1, .block2, .block3{ width: 33%; }
    .block4, .block5, .block6, .block7{ width: 66%; }
    .block8, .block9, .block10, .block11, .block12,
    .block13, .block14, .block15{ width: 100%; }}
@media screen and (min-width: 481px) and (max-width: 640px){
    .block1, .block2, .block3{ width: 25%; }
    .block4, .block5, .block6, .block7{ width: 50%; }
    .block8, .block9, .block10, .block11{ width: 75% }
    .block12, .block13, .block14, .block15{ width: 100%; }}
@media screen and (min-width: 640px) and (max-width: 860px){
    .block1, .block2, .block3{ width: 20%; }
    .block4, .block5, .block6{ width: 40%; }
    .block7, .block8, .block9{ width: 60%; }
    .block10, .block11, .block12{ width: 80%; }
    .block13, .block14, .block15{ width: 100%; }}
@media screen and (min-width: 861px) and (max-width: 1024px){
    .block1, .block2{ width: 14%; }
    .block3, .block4{ width: 26%; }
    .block5, .block6{ width: 39%; }
    .block7, .block8{ width: 52%; }
    .block9, .block10{ width: 65%; }
    .block11, .block12{ width: 77%; }}
@media screen and (min-width: 1025px) and (max-width: 1280px){
    .block1{ width: 8%; }
    .block2{ width: 14%; }
    .block3{ width: 20%; }
    .block4{ width: 26%; }
    .block5{ width: 32%; }
    .block6{ width: 38%; }
    .block7{ width: 44%; }}
/* 響應式切換定義-裝置手動樣式 */
@media screen and (min-width: 1px) and (max-width: 640px){
    .mb-fd-row{ width: 100%; }
    .mb-fd-hide{ display: none;}
    .mb-fd-center{ margin: 0 auto; display: block; }
    .mb-fd-in-center{
        text-align: center;
        justify-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
    }
    .mb-fd-in-center > *{
        text-align: left;
    }
}
@media screen and (min-width: 641px) and (max-width: 767px){
    .mb-fd-row, .tp-fd-row{ width: 100%; }
    .mb-fd-hide, .tp-fd-hide{ display: none;}
    .mb-fd-center, .tp-fd-center{ margin: 0 auto; display: block; }
    .mb-fd-in-center, .tp-fd-in-center{
        text-align: center;
        justify-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
    }
    .mb-fd-in-center > *, .tp-fd-in-center > *{
        text-align: left;
    }
}
@media screen and (min-width: 768px) and (max-width: 1280px){
    .tp-fd-row{ width: 100%; }
    .tp-fd-hide{ display: none; }
    .tp-fd-center{ margin: 0 auto; display: block; }
    .tp-fd-in-center{
        text-align: center;
        justify-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
    }
    .tp-fd-in-center > *{
        text-align: left;
    }
}