`
王之子
  • 浏览: 109406 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

用 Media Queries 设计移动网页端

阅读更多

今天来通过Media Queries样式模块,可以实现根据移动设备的屏幕大小,定制网站页面的不同布局效果。它的优点是开发者只需要实现一套页面,就能够在所有平台的浏览器下访问网站的不同效果。


用 viewport 设置适应移动设备屏幕大小


1.什么是 viewport

Apple 为了解决移动版 Safari 的屏幕分辨率大小问题,专门定义了 viewport 虚拟窗口。它的主要作用是允许开发者创建一个虚拟的窗口(viewport),并自定义其窗口的大小或缩放功能。

如果开发者没有定义这个虚拟窗口,移动版 Safari 的虚拟窗口默认大小为 980 像素。现在,除了Safari浏览器外,其他浏览器也支持 viewport 虚拟窗口。但是,不同的浏览器对viewport窗口的默认大小支持都不一致。默认值分别如下:

— Android Browser 浏览器的默认值是 800 像素;

— IE 浏览器的默认值是 974 像素;

— Opera 浏览器的默认值是 850 像素。

2.如何使用 viewport

viewport虚拟窗口是在meta元素中定义的,其主要作用是设置Web页面适应移动设备的屏幕大小。

如以下代码:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
 
该代码的主要作用是自定义虚拟窗口,并指定虚拟窗口width宽度为device-width,初始缩放比例大小为1倍,同时不允许用户使用手动缩放功能。

在上面的代码中,我们使用了一个特别的名字:device-width。自iPhone面世以来,其屏幕的分辨率一致维持在 320´480。由于 Apple 在加入 viewport 时,基本上使用 width=device-width 的表达方式来表示 iPhone 屏幕的实际分辨率大小的宽度,比如 width=320。因此,其他浏览器厂商在实现其 viewport 的时候,也兼容了 device-width 这样的特性。

代码中的 content 属性内共定义三种参数。实际上 content 属性允许设置6种不同的参数,分别如下:


— width 指定虚拟窗口的屏幕宽度大小。

— height 指定虚拟窗口的屏幕高度大小。

— initial-scale 指定初始缩放比例。

— maximum-scale 指定允许用户缩放的最大比例。

— minimum-scale 指定允许用户缩放的最小比例。

— user-scalable 指定是否允许手动缩放。
 
 

Media Queries如何工作

 
1、定义当前屏幕可视区域的宽度最大值是600像素
<link href="small.css" rel="stylesheet" media="screen and(max-width:600px)"/>
 
那么 small.css 怎样写的呢
@media screen and (max-width:600px) { .demo { background-color:red; } }
 
2、定义当前屏幕可视区域的宽度长度在600到900像素之间
<link href="small.css" rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"/>

@media screen and (min-width:600px) and (max-width:900px) { .demo { background-color: red; } }
 
3、当移动屏幕处于纵向(portrait)模式下时,应用portrait样式文件,当移动设备处于横向(landscape)模式下,应用landscape样式文件
<link href="protrait.css" rel="stylesheet" media="all and(orientation:portrait)"/> 
<link href="landscape.css" rel="stylesheet" media="all and(orientation:landscape)"/>
 

Media Queries语法总结

语法格式如下图所示:


 

1、使用 Media Queries 样式模块时都必须以“@media”方式开头

2、media_query 表示查询关键定,比如说 not only and 等等
  • not 表示对后面的样式表达式执行取反操作 
  • only 让不支持 Media Queries 的设备但能读取 Media Type 类型的浏览器忽略这个样式,对于支持Media Queries 的移动设备来说,如果存在 only 关键字,移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件 

3、media_type 指定设备类型(也称媒体类型)

4、media_feature 定义 css 中的设备特征  
 

media_type设备类型一览表

 
 

 
 

media_feature设备特征一览表

大部分设备特征都允许接受min/max的前缀


 

 
 原文链接:http://woqilin.blogspot.com/2016/05/media-queries.html

 

  • 大小: 78.7 KB
  • 大小: 215.7 KB
  • 大小: 33.7 KB
  • 大小: 13.6 KB
分享到:
评论

相关推荐

    Media Queries移动设备样式

    Media Queries移动设备样式

    用css3 media queries创建手机版网站

    - **响应式设计的基础**:Media Queries是实现响应式网页设计的关键技术之一。 #### 如何使用Media Queries ##### 基本语法 Media Queries的基本语法结构如下: ```css @media not|only &lt;media type&gt; and () { ...

    彻底弄明白CSS3的Media Queries(跨平台设计)

    移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有完美...

    第54章 Media Queries 与自适应布局

    Media Queries是CSS3的一个关键特性,它使得网页设计可以基于设备的特定特性,如屏幕尺寸、分辨率或方向,来应用不同的样式。自适应布局则是构建响应式网站的核心,使网站能够优雅地适应各种屏幕大小,从而提供优质...

    移动Html5网页模板

    在移动Html5模板中,通常会使用媒体查询(Media Queries)来定义不同设备条件下的样式,确保页面在手机、平板和桌面电脑上都能自适应显示。 5. 交互体验:移动设备上的交互方式与传统桌面设备不同,因此模板需要...

    pc与移动端端适配网页模板

    首先,我们需要理解响应式网页设计(Responsive Web Design,简称RWD)。这是一种设计方法,允许网页根据访问设备的屏幕尺寸和方向自动调整布局、图片大小以及功能。响应式设计的核心在于CSS3中的媒体查询(Media ...

    移动开发网页设计-大气宽屏的设计师作品展示html5模板源码.zip

    移动开发网页设计强调的是对移动设备的优化,考虑到移动设备的特性,如小屏幕、触摸操作等,此模板可能采用了流式布局(Responsive Layout)、媒体查询(Media Queries)等技术,确保在不同分辨率的移动设备上都能...

    移动开发网页设计源码-.黑色复古背景网站设计官网模板下载.zip

    移动开发网页设计源码是构建适应各种设备的网站的关键元素,尤其在当今多屏互动的时代,移动优先的设计策略已经成为行业标准。本资源提供了一个黑色复古背景的网站设计官网模板,适用于那些希望创建具有独特视觉风格...

    模特设计CSS网页模板

    先为小屏幕设备设计,然后逐渐增加媒体查询(media queries)以适应更大的屏幕。这确保了无论在哪种设备上,用户都能获得良好的浏览体验。 六、SEO优化 一个好的模特设计CSS模板不仅注重视觉效果,还会考虑搜索引擎...

    移动Web网页开发笔记

    CSS3则引入了新的选择器,动画效果,以及响应式设计的工具,使网页设计更具表现力和灵活性。JavaScript是网页动态功能的基石,其ES6(ECMAScript 6)版本引入了许多新特性,如类、模块、箭头函数等,进一步提升了...

    响应式网页设计

    响应式网页设计的重要性在于,随着移动设备的普及,用户访问互联网的方式越来越多样化。通过响应式设计,开发者可以确保网站在任何设备上都能提供一致且高质量的浏览体验,从而提高用户满意度,降低跳出率,最终有利...

    博客主页网页设计.7z

    在这个案例中,虽然没有明确提到响应式设计,但考虑到移动设备的提及,设计者可能已经应用了媒体查询(Media Queries)或其他方法,使网页在手机和平板电脑上也能正确显示和操作。 综上所述,这个“博客主页网页...

    移动开发网页设计源码-css3大气婚庆摄影公司响应式整站模板.zip

    移动开发网页设计源码在当前数字化时代扮演着至关重要的角色,尤其对于婚庆摄影公司而言,拥有一个高质量、响应式的网站能够极大地提升品牌形象和服务展示。"css3大气婚庆摄影公司响应式整站模板"正是这样一款专为这...

    手机端瀑布流

    手机端瀑布流是一种在移动设备上广泛采用的网页布局方式,其设计灵感来源于现实生活中的瀑布,使得内容以一种连续、不规则的方式呈现,用户在滚动屏幕时,新的内容会像瀑布一样自然滑落,带来流畅且极具吸引力的浏览...

    CSS3媒体查询Media Queries基础学习教程

    CSS3媒体查询(Media Queries)是现代网页设计中用于响应式设计的关键技术之一。它们允许开发者根据不同的设备特性以及设备状态应用特定的CSS样式规则。媒体查询通过检测设备的屏幕尺寸、分辨率、方向、颜色深度等...

    网页设计个人网页

    网页设计是IT领域中至关重要的一环,特别是在互联网发展日新月异的今天,个人网页设计已经成为展示自我、分享信息和互动交流的有效平台。本主题主要围绕"网页设计个人网页"展开,旨在探讨如何创建一个独特且吸引人的...

    div+css网页设计

    这个标题“div+css网页设计”暗示了我们将会探讨如何使用这两个工具来创建美观且功能性的网站。 描述中提到“首页是div+css做的”,这表明设计者特别强调了主页的设计。在网页设计中,首页通常是用户的第一印象,...

    网页设计与制作案例教程

    3. **响应式设计**:随着移动设备的普及,响应式设计成为现代网页设计的必备技能。设计师需要利用媒体查询(media queries)和其他技术确保网页在手机、平板和桌面电脑上的适应性。 4. **JavaScript**:JavaScript...

    基于响应式WEB设计的网页模板的设计与实现_张树明.pdf

    响应式Web设计是一种适应不同设备屏幕尺寸的网页设计方法,其核心思想是创建可以自动响应用户设备屏幕的网页布局,确保用户无论使用何种设备访问网站都能获得一致的用户体验。本文介绍了基于响应式Web设计的网页模板...

Global site tag (gtag.js) - Google Analytics