- <section>:
和 div 一样, 逻辑上的分段, 可以为其定义 css ,例如
1 |
<section class="main"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.main { height: 100%; .justify-content(center); text-shadow: black 1px 1px 12px; header { min-height: 222px; @media @smartphonesPortrait { min-height: 66px; } img { @media @smartphonesPortrait { top: 37px; width: 240px; } } } |
- @media 代表网页如何适应不用的浏览器或者手机尺寸
w3schools 的例子: Change the background color of the <body> element to “lightblue” when the browser window is 600px wide or less:
1 2 3 4 5 |
@media only screen and (max-width: 600px) { body { background-color: lightblue; } } |
opentok-rtc 的例子:
1 2 3 |
@smartphones: ~"only screen and (max-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)"; @smartphonesLandscape: ~"@{smartphones} only screen and (orientation:landscape) and (max-width: 480px), only screen and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)"; @smartphonesPortrait: ~"@{smartphones} only screen and (orientation:portrait) and (max-width: 480px), only screen and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)"; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.main { height: 100%; .justify-content(center); text-shadow: black 1px 1px 12px; header { min-height: 222px; @media @smartphonesPortrait { min-height: 66px; } img { @media @smartphonesPortrait { top: 37px; width: 240px; } } } |
- 各种 div 的用法
a) index.ejs 右边容器的css定义为 :
1 2 3 4 5 6 7 |
.main #righthand-container { height: 100%; display: table; width: 498px; right: 0; position: absolute; } |
在 html 中 :
1 2 |
<section class="main"> <div id="righthand-container"> |
在 less
1 2 3 4 5 6 7 8 9 10 |
#righthand-container { height: 100%; display: table; width: 498px; @media @smartphonesPortrait { width: 100%; } right: 0; position: absolute; } |
enterroom 按钮的定义
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 |
.main #enter { position: absolute; width: 50px; height: 50px; padding: 0; right: -82px; //这句保证按钮出现在 div外面 top: calc(~"50% - 25px"); //这句保证按钮的位置在中间略上 @media @smartphones { right: 0; position: fixed; } background-color: #0099cc; opacity: 0.7; margin-left: 0; border: 0; border-radius: 0; transition: width 0.5s ease-out; background-image: url(/images/icons/ctaarrow_white@2x.png); background-size: 12.5px 21px; background-repeat: no-repeat; background-position: center; cursor: pointer; transition: opacity 0.5s; &:hover { opacity: 1; } } |