一些静态页面开发经验

最近在开发官网, 本来是说好只是在PC端的展示的, 但我太天真了, 就信了, 后来果然又说要适配移动端, 于是又喜闻乐见地改来改去.

之前也没怎么做过PC端静态网页, 在不断与UI撕逼的过程中, 总结经验如下:

  1. 移动优先. 就算说好是PC端的静态页面, 也要以移动端布局优先, 再通过媒体查询来适配PC端(你自己想想, 坐地铁, 等电梯, 躺床上的时候, 你是想打开电脑还是想玩手机? 如果一个网页在手机里打开惨不忍睹, 你会不会想, 这什么垃圾网页?)

  2. 图片的文件夹最好叫images. 举个例子, ps切图是指定输出目录为src, 则切出的图片一定会放在src目录下的images文件夹里的, 如果src目录没有images文件夹, ps就会新建一个. 因此, 如果src目录下存放图片的文件夹不叫images, 则你还要切完图后再移动图片, 比较麻烦.

  3. 图片. png才可以无背景色即透明的, jpg不可以. 切图时, 去掉纹理层, 保留蒙版层(让图片颜色变灰淡), 这样切出来的图片体积最小, 在格式上, 导出的图片jpg比png更小. 导出的图片可以使用ImageOptim压缩一下

  4. Safari是垃圾浏览器(哼哼, 虽然我用Mac, 但我还是要这样说. 我用Chrome, UI用Safari, 结果UI经常对我说, 你这网页有bug😂) 简单来说, 相比Chrome, Safari渲染页面的方式要”笨”一些.

  5. video 最通用的格式为mp4, IE9+适用. 使用前可以用HandBrake先压缩一下, 如果缩放视频, 有个方法是先设置position: absolute, 然后再指定宽度或高度(只指定一个, 因为视频不允许变形的), 但因为Safari比较”笨”, 需要设置top属性, 而设置了top, 又可能造成溢出, 需要设置margin: auto, 则最终代码如下:

1
2
3
4
5
6
7
video {
  position: absolute; /*注意父元素position: relative*/
  top: 0; /*兼容Safari*/ 
  bottom: 0; 
  width: 100%; /*铺满父元素*/
  margin: auto; /*设置top/bottom后, margin: auto可以让视频不溢出父元素*/
}

另外, video 设置loop循环播放时, Chrome控制台可以看到, Chrome不断地发送请求, 而别的浏览器却不会, 难道Chrome有bug? 不, 肯定是因为你设置了”开启控制台时禁用缓存选项”, 详情请看stackoverflow的问答

Fork me on GitHub