Web前端-HeadFirst笔记-CH9-多个样式表-media
来源:互联网 发布:安卓淘宝没有指纹支付 编辑:程序博客网 时间:2024/05/24 22:46
原理
样式表的顺序代表优先级。
应用
- 修改样式,可能不需要修改样式表。只需要链接这个样式表,然后在下面提供自己的样式表,指定要修改的样式。
- 可以针对不同设备选择不同的样式表。
方法——不同设备的样式表选择
1. html中:link标记中媒体查询-media
添加多个link标记,通过创建一个“媒体查询”来指定设备类型,涵盖不同的设备。
html-head: <link media="指定应用此样式表的设备类型" href="文件源" rel="stylesheet" >
2. CSS中:@media 媒体查询{与查询匹配的规则}
不在匹配查询中的规则可以适用于所有设备页面。
3. 对比:当CSS非常庞大,使用html-link较好。
Tips-常用属性
- 最大最小屏幕宽度min-device-width\max-device-width
- 最大最小浏览器宽度:max-width\min-width
- 显示方向(orientation/landscape/portrait)
- 颜色
- 宽高比
- more--->CSS3媒体查询规范
阅读全文
0 0
- Web前端-HeadFirst笔记-CH9-多个样式表-media
- Web前端-HeadFirst笔记-CH9 盒模型
- Web前端-HeadFirst笔记-CH9-Class与id
- Web前端-HeadFirst-笔记-图片-height width
- Web前端-HeadFirst-笔记-html规范
- Web前端-HeadFirst-笔记-CH10-子孙选择器
- Web前端-HeadFirst-笔记-Ch11-三布局
- Web前端-HeadFirst笔记-CH11-定位
- Web前端-HeadFirst-笔记-Ch14-表单
- Web前端-HeadFirst笔记-CH10 span div 伪类
- Web前端-HeadFirst-笔记-Ch10-层叠与特定性计算
- Web前端-HeadFirst-笔记-CH10-简写vs长形式
- Web前端-HeadFirst-笔记-Ch11-流,float,分栏
- Web前端-HeadFirst笔记-Ch12-HTML5新标记
- Web前端-HeadFirst-笔记-Ch12-h5的视频实现
- Web前端-HeadFirst-笔记-Ch13-表格与列表
- css-@media媒体查询多个样式表
- Web前端-HeadFirst-CH7-CSS入门
- C++类和对象
- python程序退出方式[sys.exit() os._exit() os.kill() os.popen(...)]
- linux线程实现机制(上)
- Rviz教程(十):Librviz: Incorporating RViz into a Custom GUI
- dspic33系列编程之PWM篇
- Web前端-HeadFirst笔记-CH9-多个样式表-media
- Android RxJava使用教程
- kotlin源码分析-标准内置函数
- UVa 599
- 如何修改tomcat ipv6 转换为 ipv4
- bean标签属性介绍
- windows batch file : backup the SAM files
- c语言参考书
- 180.Consecutive_Numbers