前端页面开发,最低兼容IE 8的多设备跨平台问题解决!
项目要求:
网站能够使用PC、ipad、mobile phone正常访问
页面PSD版式宽度分别为1024px和750px
参考资料
使用CSS3 Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
Media Queries的语法如下所示:
@media [media_query] media_type and media_feature
使用Media Queries样式模块时都必须以"@media"方式开头。
[media_query]表示查询关键字包括all/not/only
not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。
only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。
在Media Query中如果没有明确指定Media Type,那么其默认为all.
media_type参数的作用是指定设备类型,通常称为媒体类型。实际上在CSS2.1版本时已经定义了该媒体类型。
media_type |
设备类型说明 |
all |
所有设备 |
aural |
听觉设备 |
braille |
点字触觉设备 |
handled |
便携设备,如手机、平板电脑 |
|
打印预览图等 |
projection |
投影设备 |
screen |
显示器、笔记本、移动端等设备 |
tty |
如打字机或终端等设备 |
tv |
电视机等设备类型 |
embossed |
盲文打印机 |
media_feature的主要作用是定义CSS中的设备特性,大部分移动设备特性都允许接受min/ max的前缀。例如,min-width表示指定大于等于该值;max-width表示指定小于等于该值。
设 备 特 性 |
是否允许 min/max 前缀 |
特 性 的 值 |
说 明 |
width |
允许 |
含单位的数值 |
指定浏览器窗口的宽度大小, 如480像素 |
height |
允许 |
含单位的数值 |
指定浏览器窗口的高度大小, 如320像素 |
device-width |
允许 |
含单位的数值 |
指定移动设备的屏幕分 辨率宽度大小,如480像素 |
device-height |
允许 |
含单位的数值 |
指定移动设备的屏幕分 辨率高度大小,如320像素 |
orientation |
不允许 |
字符串值 |
指定移动设备浏览器的窗口方向。 只能指定portrait(纵向)和landscape (横向)两个值 |
aspect-radio |
允许 |
比例值 |
指定移动设备浏览器窗口的 纵横比例,如16:9 |
device-aspect-radio |
允许 |
比例值 |
指定移动设备屏幕分辨率的 纵横比例,如16:9 |
color |
允许 |
整数值 |
指定移动设备使用多少位的颜色值 |
color-index |
允许 |
整数值 |
指定色彩表的色彩数 |
monochrome |
允许 |
整数值 |
指定单色帧缓冲器中每像素的字节数 |
resolution |
允许 |
分辨率值 |
指定移动设备屏幕的分辨率 |
scan |
不允许 |
字符串值 |
指定电视机类型设备的扫描方式。 只能指定两种值:progressive表 示逐行扫描和interlace表示隔行扫描 |
grid |
不允许 |
整数值 |
指定设备是基于栅格还是基于位图。 基于栅格时该值为1,否则为0 |
兼容的浏览器:
HTML中引用方式如下:
一、最大宽度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是:当屏幕小于或等于600px时,将采用small.css样式来渲染Web页面。
二、最小宽度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。
三、多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query可以结合多个媒体查询,换句话说,一个Media Query可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
四、设备屏幕的输出宽度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率
CSS中引用方式如下:
@media screen and (max-width: 600px) {
选择器 {
属性:属性值;
}
} 最后不要忘记:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js或者Respond.js (推荐)
Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。 参考:
一些关于Viewport与device-width的东西~:http://www.cnblogs.com/koukouyifan/p/4066567.html
自适应网页设计参考: http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html两个viewport的故事:http://weizhifeng.net/viewports.htmlCSS3 Media Queries:http://www.w3cplus.com/content/css3-media-queries
Media Queries语法总 :http://book.51cto.com/art/201204/328362.htm
前端页面开发,最低兼容IE 8的多设备跨平台问题解决!的更多相关文章
- css背景精华所在+前端页面开发流程
background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- 我的前端页面开发js简易有效环境
前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识.真正的快速有效开发,必须实现所谓所见即所得.在构建生产时,可能需要使用gulp/grunt等task ...
- X5的UI部分和传统Web页面开发的差异
http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...
- 自适应 or 移动前端页面布局的问题?
说出来,还请各位看官不要笑 - -.哥们至今不是很清楚页面的自适应和移动前端页面开发有什么区别 .有幸哪位看官清楚这些的话,希望能不吝赐教 .A.meta <meta name=& ...
- Spring Boot +Vue 项目实战笔记(二):前后端结合测试(登录页面开发)
前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...
- JavaWeb开发使用jsp还是html做前端页面
一.概述 刚开始学习Javaweb开发的小伙伴都有一个疑惑:用jsp开发前端还是用HTML开发前端呢? 这个疑惑的来源主要是:刚接触完前端但又不深入学习js,接着学习jsp,发现老师们都一直用着jsp ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 基于Vue2.0的单页面开发方案
2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...
随机推荐
- 第三天--html列表
<!Doctype html><html> <head> <meta charset="utf-8"> ...
- SQL Server 从数据库中查询去年的今天的数据的sql语句
因为最近的项目的一个小功能需要实现当前数据和历史的今天做一个对比.在网上也查了很久,很多都是实现一个月内的,一年内的所有数据,昨晚突然就找到了下面的实现方法,在SQL Server2008中试了一下, ...
- WEB 用户指南 -- WEB 系统结构文档
本文描述了如何使用 WEB语言 编程.同时还包含了 WEAVE 和 TANGLE 程序的说明文档. WEB 程序 可以读取 WEB 文件,然后输出 TeX 文档 和 Pascal 程序. 使用 WEB ...
- 【笔记】读取properties文件
package com.bshinfo.el.userInfo.util; import java.io.BufferedReader; import java.io.File; import jav ...
- 安天AVL联合小米MIUI首擒顽固病毒“不死鸟”
不死鸟作为希腊神话中的一种怪物,拥有不断再生的能力,每当寿限将至时,它会在巢穴中自焚,并在三天后重新复活.就在近期,安天AVL移动安全团队和小米MIUI安全中心发现了病毒界的“不死鸟”,其顽固程度之深 ...
- Linux面试知识点总结
1.Linux关机重启命令: 在linux命令中reboot是重新启动,shutdown -r now是立即停止然后重新启动,都说他们两个是一样的,其实是有一定的区别的. shutdown命令可 ...
- MongoDB高可用集群配置的方案
>>高可用集群的解决方案 高可用性即HA(High Availability)指的是通过尽量缩短因日常维护操作(计划)和突发的系统崩溃(非计划)所导致的停机时间,以提高系统和应用的可用性. ...
- thinkphp验证是否登录并跳转
CommonController.class.php <?php namespace Admin\Controller; use Think\Controller; class CommonCo ...
- jsp include flush true
设置flush为true,就是说,如果你的缓冲区的内容很多了,就将数据读出,以免数据泄漏,造成错误服务器端页面缓冲,大致的意思是,在将生成的HTML代码送到客户端前,先在服务器端内存中保留,因为解释J ...
- trie树模型
可以用来表达所有的0,1选择..或者多阶段有限字符集的表达