scss

1
2
3
4
5
6

$mobile: only screen and (max-device-width: 720px),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px);

@media #{$mobile}{
    font-size: (100vw/7.5);
}

Less

1
2
3
4
5

@mobile: ~"only screen and (max-device-width: 720px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px)";

@media @mobile{
    font-size: (100vw/7.5);
}

postcss

1
2
3
4
5
6

@custom-media --mobile only screen and (max-device-width: 720px),
                       only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px);

@media (--mobile){
    font-size: (100vw/7.5);
}

今天在写七牛图床管理时，使用nginx反向代理，加载文件报错Net::ERR_INCOMPLETE_CHUNKED_ENCODING

在移动端使用fixed将按钮定位在底部时，当input获取焦点弹出软键盘时，在安卓系统会奖底部的按钮顶上去。效果图：

1
2
3

<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>

div.outer是一个窄垂直条。 div.inner旋转90度。我想要文本居中？出现在其容器div.outer中心。不确定div.outer的大小。

See the Pen qodqzq by Jake (@JakeLaoyu) on CodePen.

通过监听window.orientation，让视频在手机上保持全屏播放

nth-child是个神奇的东西，但是总会忘记一些常用的用法。

模块的侧重点

前后端JavaScript分别搁置在HTTP的两端，它们扮演的角色并不同。浏览器端的JavaScript需要经历从同一个服务器端分发到多个客户端执行，而服务器端JavaScript则是相同的代码需要多次执行。前者的瓶颈在于带宽，后者的瓶颈则在于CPU和内存等资源。前者需要通过网络加载代码，后者从磁盘中加载，两者的加载速度不在一个数量级上。

配置模版渲染

1
2
3

app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile)
app.set('view engine', 'ejs');

之后可以再html文件中使用ejs语法渲染变量

1
2
3

res.render('index.html', {
    title: '哦'
  })