程序博客网 > linux抓包命令

CSS之media query模板

来源：互联网发布：linux抓包命令编辑：程序博客网时间：2024/05/19 11:47

在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为各种不同的设备进行样式设计的，但有一个问题大家或许还处在模糊状态，这个CSS3 Media要如何设置各自的临界点？

那么今天我们就针对上面的问题，一起来探讨一下CSS3 Media Queries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制作。那么Media Queries是如何工作的？那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文，里面已经做过详细的介绍，这里就不在进行过多的阐述

1.CSS3 Media Queries模板

CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板

1.1 使用max-width

这里写图片描述

1.2 使用min-width

这里写图片描述

1.3 max-width和min-width的混合使用

这里写图片描述

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用

1.4 iPhone和Smartphones上的运用

这里写图片描述

max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

1.5 iPads上的运用

这里写图片描述

针对移动设备的运用，如果你想让样式工作得比较正常，需要在`<head>`添加“viewport”的meta标签

这里写图片描述

2.CSS3 Media Queries在标准设备上的运用

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求

2.1 1024px显屏

这里写图片描述

2.2 640px显屏

这里写图片描述

2.3 iPad横板显屏

这里写图片描述

2.4 iPad竖板显屏

这里写图片描述

阅读全文

0 0

linux抓包命令

linux抓包命令

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子手机网页无法加载插件怎么办微信公众号被投诉怎么办住了酒店的尾房怎么办喜欢前任的闺蜜怎么办闺蜜给介绍对象怎么办喜欢对象的发小怎么办山东省直医保卡丢失怎么办高铁票如果错过了怎么办动车错过了时间怎么办长途动车错过了怎么办动车如果错过了怎么办没有取票错过了怎么办动车出站没检票怎么办火车晚点耽误了下班车怎么办动车票中途丢了怎么办购买二手房异地铁路公积金怎么办沈阳公积金卡丢了怎么办住宅专项维修资金用完了怎么办广州出租车丢了东西怎么办广州的士丢了东西怎么办网上找兼职被骗了怎么办海信空调开不了机怎么办海信空调遥控器开不了怎么办学生遭套路贷反被仲裁怎么办赏脸打错字尝脸怎么办红掌的花变黑了怎么办红掌花苞发黑了怎么办水培植物腐根了怎么办水培绿萝水发臭怎么办水里养花根烂掉怎么办桅子花叶子发黑怎么办大株月季烂根怎么办月季水浇多了烂根的怎么办金桔盆栽烂根怎么办盆栽的长寿果树烂根怎么办家里的石榴烂根怎么办山桔盆栽烂根怎么办养的植物烂根怎么办桅子花叶子长霉怎么办紫薇花叶子干了怎么办高层玻璃阳台往下看恐高怎么办