zbp主题简单页面3的媒体自适应计划

LinSan2017年07月10日zblog

无论做什么,总要有继续的理由,前进是要有目标的。此博要坚持至少十日一更的节奏,传播正能量的同时,做好 简单页面3 的后期优化工作(包括代码和功能)。至于现在很流行的媒体自适应,当然要有的,zbp主题简单页面3的目标是实现媒体自适应的标准风格,这些需要时间的积累。

利用@media实现网页自适应,这里面有几个关键分辨率。分别是:

@media (min-width: 768px){ //>=768的设备}

@media (min-width: 1024px){ //>=1024的设备}

另外1种方法是html代码加判断,判断屏幕大小后显示不同的css,模块化管理:

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width:768px)"

href="tinyScreen.css" />

如果屏幕宽度小于768像素(max-device-width: 768px),就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css"

media="screen and (min-width:768px) and (max-device-width:1024px)"

href="smallScreen.css" />

如果屏幕宽度在768像素到1024像素之间,则加载smallScreen.css文件。

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: