欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

响应式手机网站要点

程序员文章站 2022-04-11 21:44:08
...
CSS3里面很多地方浏览器不兼容,需要我们根据浏览器的内核添加前缀:
火狐浏览器 -moz-
谷歌和苹果 -webkit-
ie9以及以上版本 -ms-
欧朋 -o-
早期的苹果浏览器(safari) linux konqueror 需要加:-khtml-
谷歌2013 自己开发了新的内核 blink

响应式手机网页:【更换样式表(媒体查询:让css能够根据浏览器宽度来选择是否被使用,js更换)
;约束视口;流式布局(让百分比写width、padding、margin)】

window对象的事件:onload加载完成; onresize调整尺寸; onsrcoll滚动滚轮。
js更换样式表

【约束视口】

一个id和name为viewport的meta元标记就表示现在要约束视口了。具体约束规则写在content中,
每个约束规则用逗号隔开。
width=device-width -- 命令视口的宽度,变为设备的宽(以1024*768屏幕为标准。iphone等手机
通常为320~380之间不等)
initial-scale=1.0 -- 命令视口默认的缩放等级为1
minimum-scale=1.0 -- 命令视口最小缩放等级为1
maximum-scale=1.0 -- 命令视口最大缩放等级为1
user-scalable=no -- 不允许用户缩放页面

当用户设备宽度大于980的时候,用的pc界面;
当用户设备宽度在620~979之间,用的pad界面;
当用户设备宽度小于619的时候,用手机界面。

【轮播图】
用swipe.js