css 网页自适应 @media screen详解

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

二话不说直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 当页面宽度大于1200px*/@media screen and (min-width:1200px) {body{background:saddlebrown;}}/* 当页面宽度大于960px小于1200px */@media screen and (min-width:960px) and (max-width:1200px){body{background:yellow;}}/* 当页面宽度大于600px小于960px */@media screen and (min-width:600px) and (max-width:960px){body{background:darkmagenta;}}/* 当页面宽度大于300px小于600px */@media screen and (min-width:300px) and (max-width:600px){body{background:aqua;}}/* 当页面宽度小于300px*/@media screen and (max-width:300px) {body{background:salmon;}}</style>
</head><body><div class="box"><div></div><div></div><div></div><div></div><div></div></div>
</body></html>

css 网页自适应 @media screen详解相关推荐

利用 @media screen 实现网页布局的自适应,@media screen and
利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries 其作用就 ...
html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品
原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
CSS动画（animation）详解
CSS动画(animation)详解通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解
Linux使用Node.js建立访问静态网页的服务实例详解一.安装node.js运行所需要的环境,: 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.j ...
后台任务命令screen详解
后台任务命令screen详解前言: 作为一位运维人员,我们经常需要SSH或者telent 远程登录到Linux服务器,经常运行一些需要很长时间才能完成的任务,比如下载.系统备份.文件传输等.通常情况 ...
金蝶云星空html5的网页主界面如何修改,金蝶云星空系统与嵌套网页进行交互实现详解...
金蝶云星空系统与嵌套网页进行交互实现详解一.应用场景: 嵌套网页与金蝶云星空进行数据交互,例如:在被嵌套网页中,点击一个按钮,需要把数据发送到金蝶云星空系统当中,并且,星空系统接收发过来的数据,同时 ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
WMV网页播放器代码详解
WMV网页播放器代码详解 WMV是流媒体,用专门的代码播放,效果会更好一些. 这里只举WMV(MediaPlayer9.0及以后)的网页内嵌播放器代码.(默认0为否,-1或1为是) 程序代码: < ...
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...

css 网页自适应 @media screen详解

css 网页自适应 @media screen详解相关推荐

最新文章

热门文章