前端学习day03
来源:互联网 发布:163邮箱群发软件 编辑:程序博客网 时间:2024/06/06 14:07
今天学了个新东西,是根据屏幕宽度大小修改网页显示的内容。
大概查了下用法,@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
这个有时有效,有时会失效,具体是看电脑分辨率而定的,所以使用时要留意下这一点。
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>@media screen and (max-width:800px) {/*当屏幕宽度小于或等于800px时*/div {width: 100px;height: 100px;background: red;}}@media screen and (min-width:800px) {/*当屏幕宽度大于或等于800px时*/div {width: 200px;height: 200px;background: gold;}}</style></head><body><div class="header"></div><div class="bodys"></div></body></html>
0 0
- 前端学习day03
- java 学习笔记 day03
- C++学习日记day03
- java学习day03
- JQuery学习笔记--Day03
- linux c学习 day03
- c++ primer学习 day03
- C++学习笔记 day03
- Java学习 day03
- java学习day03
- Android学习day03
- [Android开发学习] day03
- mysql 学习笔记 day03
- swift学习Day03
- lua学习Day03
- 重新学习c++ day03
- CSS学习、Day03
- linux学习-day03
- 安装cuda的错误解决办法
- BootStrap
- 1010. Radix 解析
- 线段树 HDU - 5493 加贪心
- js路径跳转
- 前端学习day03
- 新手学c++ 第十章 标准库类型
- mybatis 动态操作Sql语句
- LeetCOde350详细分析并附求解代码
- php web屏幕截图上传服务器和保存本地功能
- Android学习之路---使用ViewPager实现引导页
- 人物血条的变化
- Linux下C语言Socket编程
- python3.5安装pycrypto的问题