Skip to content

CSS 常见用法

自适应网页布局

参考 利用@media screen实现网页布局的自适应

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
}

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
}

880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
}

display

对 img 添加

display: block

达到居中的作用

meta 标签

Meta标签给搜索引擎提供了许多关于网页的信息。

为了不让用户手动去改变页面大小，需要加上

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  1. Meta 标签与搜索引擎优化
  2. 手机网页布局经验总结

font-family的选择

看到一篇超级棒的博客

如何优雅的选择字体(font-family)

cloudflare 的rocket load module

慎用，在ESL上，出现了如下问题

A Parser-blocking, cross-origin script, http://example.org/script.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

以及公式解析错误。

解决方案，去cloudflare主页disable掉rocket load module.

Uncaught ReferenceError: $ is not defined?

参考Uncaught ReferenceError: $ is not defined?

网页底部出现滚动条

查看footer的width是否为100%，若是，则删掉，某次是因为这个原因。

通过 flexbox，例如

/* https://demo.tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/styles.css */
body{
    display: flex;
    flex-direction: column;
    height: 100%;
    font: 400 15px/1.4 'Open Sans',sans-serif;
}

header{
    /* We want the header to have a static height - it will always take up just as much space as it needs.  */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
}

.main-content{
    /* By setting flex-grow to 1, the main content will take up
    all of the remaining space on the page (the other elements have flex-grow: 0 and won't contest the free space). */
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 1 0 auto;
}

footer{
    /* Just like the header, the footer will have a static height - it shouldn't grow or shrink.  */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
}

参考

em 和 rem

何时使用 Em 与 Rem

或者参考

rem、px、em之间的区别以及网页响应式设计写法 - Gabriel_wei - 博客园

简单说，

  • rem: 相对根节点
  • em: 相对父节点
  • px: 绝对值

Mathjax 公式锚点偏移

详见 mathjax link to equation

参考资料：