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

无论做什么,总要有继续的理由,前进是要有目标的。此博要坚持至少十日一更的节奏,传播正能量的同时,做好 简单页面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文件。

未经允许不得转载:林三定制 » zbp主题简单页面3的媒体自适应计划

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏