直播教育APP小程序开发

规则一:移动设备允许网页宽度自动调整

由于移动设备的宽度和显示设备宽度是明显的差别,移动端的视口太窄，为了能更好为css布局服务，所以提供了两个viewport:visualviewport和layoutviewport(敬请关注viewport和像素详解),默认情况下移动端默认的布局视口是980px,如下图所示;

怎么解决呢?通过改变viewport值,让移动设备布局视口大小与设备可视区域一样

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

上面代码的意思是把width改成设备的宽度,这边的width指的就是布局的视口,这个布局的视频可以通过document.documentelement.clientwidth获得到,默认是980,(width=device-width),指宽度等于屏幕宽度,initial-scale=1.0指不缩放,这个属性(initial-scale)有默认的缩放值(device-width/980),所以pc端页面在移动设备上显示时会被缩小.

规则二:布局上不使用宽度

具体指:布局时不使用固定像素,而是使用百分比或者width:auto. 目前常见的布局有三种,即:固定布局,流式布局和 弹性布局,而流式布局和弹性布局是响应式布局更好的方案

规则三:引用媒体查询(@media)的使用

上面所说的自动识别网页宽度,并作出相应调整,这个方案的实现,媒体查询起了关键性的作用

通俗点讲:媒体查询其实就是根据不同的媒体条件指定不同的css规则