`
喧嚣求静
  • 浏览: 551314 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

移动设备样式之媒体查询HTML5<二>

 
阅读更多

关于media queries如何工作呢?

在传统网页布局向移动版本网页布局转换中起着最重要的作用,他能针对不同设备屏幕查询使用不同的样式

要实现media queries样式模块,需要在head标签内导放一个css样式文件,例如

使用media属性定义当前屏幕可视区域的宽度最大值是600像素时应用样式文件

<link rel=”stylesheet” media=”screen and(max-width:600px)”  href=”small.css”/>

在small.css样式文件内,需要定义media类型的样式,例如:

@media screen and (max-width:600px){

.demo{

background-color:#ccc;

}

}

media_type设备可用类型



 

 

 

  • 大小: 26.8 KB
  • 大小: 66.5 KB
分享到:
评论

相关推荐

    WEB设计大全

    &lt;IMG&gt;标签 &lt;br&gt;&lt;br&gt;11.4.3 图像类型 &lt;br&gt;&lt;br&gt;11.4.4 与图像相关的问题 &lt;br&gt;&lt;br&gt;11.4.5 分割图像 &lt;br&gt;&lt;br&gt;11.4.6 Web中基于矢量的艺术: Flash &lt;br&gt;&lt;br&gt;11.5 背景图像 &lt;br&gt;&lt;br&gt;11.6 小结 &lt;br&gt;&lt;br&gt;第12章 利用GUI特性...

    WEB设计大全(part2)

    &lt;IMG&gt;标签 &lt;br&gt;&lt;br&gt;11.4.3 图像类型 &lt;br&gt;&lt;br&gt;11.4.4 与图像相关的问题 &lt;br&gt;&lt;br&gt;11.4.5 分割图像 &lt;br&gt;&lt;br&gt;11.4.6 Web中基于矢量的艺术: Flash &lt;br&gt;&lt;br&gt;11.5 背景图像 &lt;br&gt;&lt;br&gt;11.6 小结 &lt;br&gt;&lt;br&gt;第12章 利用GUI特性...

    C#编程经验技巧宝典

    4&lt;br&gt;&lt;br&gt;0008 为程序设置版本和帮助信息 4&lt;br&gt;&lt;br&gt;0009 设置Windows应用程序启动窗体 5&lt;br&gt;&lt;br&gt;0010 设置Web应用程序起始页 5&lt;br&gt;&lt;br&gt;0011 如何设置程序的出错窗口 5&lt;br&gt;&lt;br&gt;0012 如何进行程序调试 6&lt;br&gt;...

    可慧内容管理系统

    &lt;br&gt;常见问题问答 &lt;br&gt;友情链接目录 &lt;br&gt;站点新闻 &lt;br&gt;日程安排 &lt;br&gt;邮件收发 &lt;br&gt;个人短信&lt;br&gt;用户评论系统&lt;br&gt;功能强大的KehuiCMSExplorer,可以对网站的文件,目录进行管理,包括编辑文件,创建新文件,删除文件,...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...

    html网页制作手册.zip

    《HTML5开发手册》总共分为15章,先后讲解了HTML5中新增的元素、浏览器对HTML5的支持、CSS3中的新布局和样式、HTML5 Web表单、多媒体技术、地理定位API、客户端存储、WebSocket API,以及集成设备数据等内容。...

    小灯泡自媒体博客Spimes4.6收费typecho主题模板无加密无授权源码

    Spimes主题专为博客、自媒体、资讯类的网站设计开发,自适应兼容手机、平板设备。 一款简约新闻自媒体类的 typecho 主题,设计上简约、干净、精致、响应式,后台设置更是强大而且实用的新闻自媒体类主题。 前端...

    零基础学HTML CSS源代码

    第5章(源代码\第5章) 示例描述:本章演示图像标记的用法 alt用法.html 图像参数alt用法。 插入图像.html 演示插入图像。 热点链接.htm 热点链接的用法。 图片链接边框设置.html 图片链接...

    自媒体博客Spimes主题 X7.1 简约新闻自媒体类的 typecho 主题源码+安装说明

    spimes主题专为博客、自媒体、资讯类的网站设计开发,自适应兼容手机、平板设备。一款简约新闻自媒体类的 typecho 主题,设计上简约、干净、精致、响应式,后台设置更是强大而且实用的新闻自媒体类主题。 PS:5.0...

    typecho主题小灯泡自媒体博客Spimes4.6

    新主题内置HTML5视频播放器,可支持HLS协议M3U8格式; HTTPS优化,全面支持HTTPS网站; 部分导航pjax 主题添加了OWO表情,方便用户自定义添加表情包 多种广告位添加 强大的SEO优化效果,栏目自定义标题,文章内链...

    前端前端知识点总结思维导图18

    7. 移动端开发:针对移动设备的浏览器进行优化,使用 HTML5 和 CSS3 等技术开发适配移动设备的网页和应用程序。 8. 前端框架:如 Vue.js、React、Angular 等,提供了一种开发模式和工具集,用于快速构建

    JQuery.Mobile.chm 中文

    而对于新的移动平台,则可以展现像安装在设备中的应用程序一样出色的富媒体和交互的浏览体验 6自动初始化 通过页面的html标签的data-role 属性,Jquery Mobile可以自动初始化相应的插件 7优秀的可访问性 一些特性...

    拼图(pintuer)前端框架(css框架) v1.0 正式版

    拼图前端框架介绍拼图 Pintuer:国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小...

    techdegree-project-2-portfolio:我使用HTML和CSS构建了响应式,移动优先的布局

    该项目要求首先编写CSS来为小型移动设备设置页面样式。 然后,使用最小宽度的媒体查询添加断点,以调整平板电脑和台式机屏幕的布局。 此配置文件包含 顶部的介绍段落 我的六个项目的投资组合部分 技能部分,其中...

    拼图响应式前端CSS框架v1.0正式版

    使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端...

    拼图(pintuer.com)-国产跨屏响应式前端框架-CSS框架

    拼图 Pintuer:中国版的Bootstrap,是国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用...

Global site tag (gtag.js) - Google Analytics