分享 | 教程 | 网页自适应代码

网页设置背景教程:https://weimiao.xin/archives/1317

什么叫自适应

网页自适应是网页中一种类似于PHP的if判断,实现在CSS代码中,写法有好几种格式。在一个页面做PE(手机端)和PC(电脑端)都不错,做出来可以减少大量代码!“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

格式

先理解:
1、screen:媒体类型
2、and:关键词
3、(max-width:600px):媒体特性,方便理解是“媒体条件”

在不同的宽度高度调用不一样的CSS|在现有宽度小于-最大宽度限制720px调用xxx.css

<link rel="stylesheet" type="text/css" media="screen and (max-width: 720px)" href="xxx.css" />

在CSS代码中加入“@media”进行调用

简写:@media (max-width:720px){“里面CSS代码”}
普通:@media screen and (max-width: 720px){“里面CSS代码”}

可用的参数

在@media可用的格式有

最大宽度 max-width: 720px
最大高度 max-height:720px

最小宽度 min-width: 720px
最小高度 min-height: 720px

也可以设置多个条件

@media screen and (max-width: 720px) and (max-height: 720px)

该代码并不难理解,本文章是简单的介绍、简单的介绍了用法。如果想要完整理解请百度“Media Query模块”!
如果感觉文章对你有用请评论!转载请注明原文链接!

1 评论
  1. 头像

    找不到地方留言了,就在这吧,之前的友链换一下,将我的 沐曦 http://www.butty.cn 换成下面的信息,谢谢!
    网站名称:诗梦网络
    博客地址:https://www. poetrydream.com

留言