androidmediaquery_Android手机js获取屏幕尺寸不准导致计算的问题

Ⅰ android手机js获取屏幕尺寸不准，导致计算的问题

Android中可以通过三种方式获到屏幕大小：
1、通过WindowManager获取
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
System.out.println("heigth : " + dm.heightPixels);
System.out.println("width : " + dm.widthPixels);

2、通过Resources获取
DisplayMetrics dm2 = getResources().getDisplayMetrics();
System.out.println("heigth2 : " + dm2.heightPixels);
System.out.println("width2 : " + dm2.widthPixels);

3、通过Display 获取屏幕的默认分辨率
Display display = getWindowManager().getDefaultDisplay();
System.out.println("width-display :" + display.getWidth());
System.out.println("heigth-display :" + display.getHeight());

Ⅱ 怎样低成本的实现网页在移动端的适配

解决方案涉及到的知识点：

viewport

媒体查询(media query)

Javascript window.matchMedia

响应式图片

栅格布局

顶部导航

测试工具

iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media
query技术实现网站的响应性。

viewport

在<head>之中添加viewport元数据标签。

width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。

initial-scale 表示初始缩放。

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大缩放比例，1意味着不能进行缩放。

user-scalable=no
禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。

注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒体查询(media
query)

根据不同的分辨率，引用不用的css

Css代码

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px)"

href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的实现

Js代码

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解决的确很方便，但某些场景下仍然需要JS技术。

Js代码

if (window.matchMedia("(min-width: 400px)").matches) {

// The screen width is 400px or wider.

} else {

// The screen width is less than 400px.

}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

状态改变时监听

Js代码

function setup_for_width(mql) {

if (mql.matches) {

// The screen width is 400px or wider. Set up or change things

// appropriately.

} else {

// The screen width is less than 400px. Set up or change things

// appropriately.

}

}

var width_mql = window.matchMedia("(min-width: 400px)");

// Add a listener for when the result changes

width_mql.addListener(setup_for_width);

// And share the same code to set things up with our current state.

setup_for_width(width_mql);

Ⅲ 求教：移动端web页面适配问题

之前默认使用的系统内置浏览器对象，去年应该已经在Android切换为第三方浏览器内核了。兼容性基本不用考虑，不需要考虑media
query了等等适配工作。基于参考要求，在任意一个终端上开发，在所有终端上都会有统一的展现。
基于em相对字体大小技术+屏幕DPI适配。

Ⅳ jquerymobile 怎么关闭页面

从本文开始，使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分——jQuery Mobile 事件与方法，这其中将会利用之前所讲述的 jQuery Mobile 组件作为例子说明，因此 Kayo 建议如果你不熟悉 jQuery Mobile ，可以首先阅读前面两部分的文章。本文会介绍 jQuery Mobile 的默认配置以及一些基本的事件使用方法。
一.默认配置
jQuery Mobile 会有一些默认的设置，如之前介绍过的 Ajax 导航形式，可以选择在默认配置中关闭，这样整个网站都会关闭 jQuery Mobile Ajax 导航。
jQuery Mobile 把所有这些配置都封装在 $.mobile 中，作为它的属性，因此改变这些属性值就可以改变 jQuery Mobile 的默认配置。
当 jQuery Mobile 开始执行时，它会在 document 对象上触发 mobileinit 事件，并且这个事件远早于 document.ready 发生，因此开发者需要通过如下的形式重写默认配置：

1
2
3

$(document).bind("mobileinit", function(){
// 新的配置
});

由于 mobileinit 事件会在 jQuery Mobile 执行后马上触发，因此开发者需要在 jQuery Mobile 加载前引入这个新的默认配置，若这些新配置保存在一个名为 custom-mobile.js 的文件中，你按如下顺序引入 jQuery Mobile 的各个文件。

1
2
3

<script src="jquery.min.js"></script>
<script src="custom-mobile.js"></script>
<script src="jquery-mobile.min.js"></script>

下面以 Ajax 导航作为例子说明如何自定义 jQuery Mobile 的默认配置：
在之前的文章《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面与对话框》中，Kayo 说明过，jQuery Mobile 是以 Ajax 的方式驱动网站（可以参加上文的第三点“Ajax 驱动的站点”），若某个链接不需要 Ajax ，可以为某个链接添加 data-ajax=”false” 属性，这是局部的设置，如果开发者需要取消默认的 Ajax 方式（即全局取消 Ajax），可以自定义默认配置：
代码如下：

1
2
3

$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});

jQuery Mobile 是基于 jQuery 的，因此你也可以使用 jQuery 的 $.extend 扩展 $.mobile 对象，

1
2
3
4
5

$(document).bind("mobileinit", function(){
$.extend($.mobile, {
ajaxEnabled: false
});
});

使用上面的第二种方法可以很方便的自定义多个属性，如在上例的基础上同时设置 activeBtnClass ，即为当前页面分配一个 class，原本的默认值为 “ui-btn-active”，现在设置为“new-ui-btn-active”，可以这样写：

1
2
3
4
5
6

$(document).bind("mobileinit", function(){
$.extend($.mobile, {
ajaxEnabled: false,
activeBtnClass: "new-ui-btn-active"
});
});

上面的例子中介绍了简单同时也是最基本的 jQuery Mobile 事件，它反映了 jQuery Mobile 事件需要如何使用，同时也要注意触发事件的对象和顺序。
下面列出所有的默认配置及说明。（以属性名、值的类型、默认值的方式说明）
activeBtnClass 字符串默认值："ui-btn-active"
为激动状态的按钮分配 class 值。
activePageClass 字符串默认值："ui-page-active"
为当前页面分配 class 值。
ajaxEnabled 布尔型默认值：true
控制是否禁止默认的 Ajax 链接点击和表单提交，并停止 hash 的监听，然后以常规的 HTTP 方式进行。
allowCrossDomainPages 布尔型默认值：false
设置是否允许跨域。因为 jQuery Mobile 会记录 location hash ，这有可能会为网站带来 cross-site scripting (XSS) 攻击，因此该选项默认为 false 。
autoInitializePage 布尔型默认值：true
当 DOM 加载完毕后，jQuery Mobile 会自动调用 $.mobile.initializePage 方法。如果设置该属性为 false ，则页面不进行初始化，即页面空白。
buttonMarkup.hoverDelay 整形默认值：200
该属性设置触摸触摸某一个 jQuery Mobile 按钮后添加 hover 和 down 的 class 的延时。该数值越小，延时越小，触摸越灵敏，但同时很有可能错误的触发页面滚动条滚动。因此建议数值不要太小。
defaultDialogTransition 字符串默认值："pop"
设置使用 Ajax 方式的对话框的默认过场动画。
defaultPageTransition 字符串默认值：fade
设置使用 Ajax 方式跳转的页面的默认过场动画。
gradeA 布尔型默认值："true"
设置 $.support.mediaquery 的返回值，默认为符合全部 grade A 等级的移动设备的支持条件才会返回 true 。
hashListeningEnabled 布尔型默认值：true
设置是否监听和处理 location.hash 的改变。
ignoreContentEnabled 布尔值默认值：false
把该选项设置为 true ，并且在某元素的父元素上设置 data-enhance="false" 属性，那么该元素会自动降低 jQuery Mobile 增强（jQuery Mobile 元素增强指的是 jQuery Mobile 对网页基本元素在样式上的丰富、交互上的增强以及相应的 HTML 结构改造）。
linkBindingEnabled 布尔值默认值：true
jQuery Mobile 会自动绑定锚标记到文档中，设置该选项为 false 将阻止所有的锚点击处理，例如取消激活按钮状态。一般来说只有在把锚标记处理交给另一个处理库时才设置该属性为 false 。
loadingMessageTextVisible 布尔值默认值：false
设置当页面加载中的时候是否显示提示文字。
loadingMessage 字符串默认值："loading"
设置当页面显示加载提示时，加载提示文字的内容。
loadingMessageTheme 字符串默认值："A"
设置当页面显示加载提示时，加载提示的默认主题。
minScrollBack 整形默认值：250
设置页面最小滚动距离
NS 字符串默认：""
该属性可以改变 jQurey Mobile 的命名空间，jQuery Mobile 按 data-NS 属性值安排命名空间，默认为空，则直接 data-role ，举个简单的例子，若设置 NS 的值为 "custom" ，则此时需要定义一个 jQuery Mobile 头部的话需要从原来的 data-role="header" 改为 data-custom-role="header" ，其他 data-role 也要改成为 data-custom-role 。这样开发者可以创建属于自己的命名空间，避免与 jQuery Mobile 原有的属性发生冲突，便于制作自定义主题。
需要注意的是，当你使用了 data-命名空间后，你需要更新 jQuery Mobile css 文件的选择器，格式如下
.ui-mobile [data-custom-role=page], .ui-mobile [data-custom-role=dialog] ......
pageLoadErrorMessage 字符串默认值："Error Loading Page"
设置当 Ajax 加载页面错误时显示的提示信息。
pageLoadErrorMessageTheme 字符串默认值："e"
设置当 Ajax 加载页面错误时错误提示框的主题样式。
pushStateEnabled 布尔型默认值：true
在支持的浏览器中开启 history.replaceState 这个增强特性，把哈希值（hash-based）的 Ajax 请求转化为完整的文档路径。jQuery Mobile 建议在关闭 Ajax 导航和大量使用外部链接的情况下关闭这个特性。
subPageUrlKey 字符串默认值："ui-page"
URL 参数用来指向由组件生成的子页面(如嵌套列表页)，该 URL 会被解释成如 example.html&ui-page=subpageIdentifier 的形式，而在 &ui-page= 之前的哈希值会被 jQuery Mobile 向此 URL 地址做 Ajax 请求。
touchOverflowEnabled 布尔型默认值：false
设置是否使用设备的原生区域滚动特性，除了 iOS5 之外大部分的设备到目前还不支持原生的区域滚动特性，因此在 jQuery Mobile 1.1.0 中不建议修改该属性。
二.事件基础
通过上面的基本配置，相信大家对 jQuery Mobile 的事件也有一定了解，这里 Kayo 再正式介绍一下 jQuery Mobile 的事件。
jQuery Mobile 在基于本地事件上，创建了一系列的自定义事件，大部分事件是基于触摸设备的使用情况开发的，当然这些事件对于桌面环境也会有适当的处理，开发者可以使用 bind() 函数绑定到需要的页面对象中。
值得注意的是，jQuery Mobile 是基于 Ajax 导航的，所以采用 bind() 方法绑定的事件无法作用于 Ajax 产生的网页元素中，因此建议开发者使用动态绑定的方法如 live()、delegate() 将事件动态的绑定到相应的元素中。live()、delegate() 等方法可以把 jQuery Mobile 选择器选择的 DOM 元素，在整个 DOM 范围将其持久化，这就意味着，无论该元素是先前存在还是通过 Ajax 动态加载的，事件都会被绑定，如同 CSS 给元素添加样式一样。这在对 Ajax 有比较大依赖的网站中是必须注意的。
live()、delegate() 在实现动态绑定的原理和资源消耗方面也有很大的差别，但这并不是本文的讨论范围，Kayo 将会另写文章叙述。
2012/11/7 更新
“刚刚在网友提醒下，了解到在 jQuery 1.7 中，引入了一个新的事件绑定函数 —— .on() ，用于代替 bind, live, delegate 。但 jQuery Mobile 文档仍建议使用 .bind() 和 .live() 方法绑定事件，jQuery Mobile 并没有明确其中原因，但考虑到低版本的 jQuery Mobile 只需 jQuery 1.6.4 的支持就足够，出于兼容性的原因，当然也可能是由于考虑到开发者的习惯，jQuery Mobile 才作出以上建议。当然如果开发者熟悉 .on() 方法也不妨采用 .on() 进行事件绑定。”
下面以其中的 live() 方法举一个例子说明如何动态绑定 jQuery Mobile 事件。

1
2
3
4
5

$(function(){
$("body").live('swiperight', function() {
$('#next').click(); // #next 为下一页的链接的 id
});
});

说明：上面的例子中，假设进入下一页的链接的 id 为 next 。那么在页面上向右滑动就会触发点击了下一页的链接，从而进入下一页。可以想象，这个过程是 Ajax 的，页面会平滑的跳转并且会有过场动画，这样从视觉上看，可以很好的做出原生 App 中常见的滑动翻页功能。当然，这些是基于浏览器的，如果用户的移动设备配置不高的话，会很容易造成画面不流畅等降低用户体验的情况，这也是 Kayo 在前文中建议不要使用过于炫丽的过场动画（如 3D transforms）的原因之一。
通过上面的例子，不难看出 jQuery Mobile 的强大和方便，它考虑了很多开发 Web App 需要用到的功能。至于 jQuery Mobile 的详细事件，Kayo 将会在下文中详细说明。
三.完整 Demo
本例子对上面提到的自定义 jQuery Mobile 默认配置和滑动事件绑定进行测试，滑动事件是为触摸设备而设计的，因此建议你使用触摸设备进行测试，若使用 PC 环境测试，jQuery Mobile 也会检测鼠标操作代替触摸操作，具体的操作是按住鼠标左键进行滑动，jQuery Mobile 的默认滑动有效距离是 30px，因此测试时只需滑动一小段距离即可触发滑动。具体的完整代码可以打开 Demo 后直接查看文档的源码。
完整 Demo（建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览）

Ⅳ 支付宝个人页是怎么适配所有电脑的 css

你用媒介查询
CSS3 Media Queries
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者这样的形式：
<style type="text/css" media="screen"> @import url("css/style.css"); </style>
不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。
上
面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media
Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。CSS3中的Media
Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的
样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个
例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制
作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
首先来看一个简单的实例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：
1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和媒体特性（Media Query），首先一起来理解一下这两个概念：
一、媒体类型(Media Type)
媒
体类型(Media
Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是
all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。
页面中引入媒体类型方法也有多种：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import
引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中
的<style>...</style>中引入，单这种使用方法在ie6-7都不被支持如
样式文件中调用另一个样式文件：
@import url("css/reset.css") screen; @import url("css/print.css") print;
在<head></head>中的<style>...</style>中调用：
<head> <style type="text/css"> @import url("css/style.css") all; </style> </head>
4、@media引入
这种引入方式和@import是一样的，也有两种方式：
样式文件中使用：
@media screen{ 选择器{ 属性：属性值； } }
在<head>>/head>中的<style>...</style>中调用：
<head> <style type="text/css"> @media screen{ 选择器{ 属性：属性值； } } </style> </head>
以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或G爸，他们能帮你解决。
二、媒体特性（Media Query）
前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
转换成css中的写法为：
@media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }
其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种
常用的Media Query如下表所示：

兼容的浏览器：

下面我们一起来看看Media Queries的具体使用方式
一、最大宽度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所指的是设备的实际分辨率，也就是指可视面积分辨率
五、iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的样式是专门针对iPhone4的移动设备写的。
六、iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在
大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向
(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。
七、android
/*240px的宽度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
八、not关键字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
九、only关键字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only
用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media
Type的设备隐藏样式表的。其主要有：支持媒体特性（Media
Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media
Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media
Qqueries的浏览器，不论是否支持only，样式都不会被采用。
十、其他
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外还有使用逗号（，）被用来表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。下一节将会针对Media Queries介绍几个实例，如果感兴趣的朋友记得观注本站的更新。
如需转载烦请注明出处：W3CPLUS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@media (max-width: 1186px) {

}
@media (max-width: 979px) {
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
}

/* Smaller screens ----------- */
@media (max-width : 480px) {
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

Ⅵ iphone6 media怎么写

iphone6及iphone6plus已经出来一段时间了。很多移动端网站，以前写死body为320px的，现在估计也忙着做适配了。
大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。
回归正题，兼容iphone各版本机型最佳的方式就是自适应。
1、viewport简单粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接设置viewport为320px的1.3倍，将页面放大1.3倍。
为什么是1.3？
目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320=1.171875，iphone6+则是414/320=1.29375
那么以1.29倍也就约等于1.3了。
2、ip6+的CSSmediaquery
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
/*iphone6*/
}
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
/*iphone6plus*/
}
PS:也可以直接使用实际的device-width：如device-width:375px
在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。
3、REM布局
REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+都支持。
REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。
REM与PX的换算可以查看网址：https://offroadcode.com/prototypes/rem-calculator/
假设，html我们设置font-size:12px;也就是说12px相对于1rem，那么18px也就是18/12=1.5rem。
那么我们以320px的设计布局为基准，将html设置为font-size:100px，即100px=1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
REM如何做响应式布局？
1、如果仅仅是适配ip6+设备，那么使用mediaquery就行。
伪代码如下：
/*320px布局*/
html{font-size:100px;}
body{font-size:0.14rem/*实际相当于14px*/}
/*iphone6*/
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size:117.1875px;}
}
/*iphone6plus*/
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
html{font-size:129.375px;}
}
这样，在ip6下，也就将页面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。
2、如果是完全自适应，那么可以通过JS来控制。
(function(doc,win){
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=100*(clientWidth/320)+'px';
};
//
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
页面初始化的时候计算font-size，然后再绑定resize事件。这种效果就和百分比布局一样了。
那么用REM做单位与百分比做单位有什么优势？
主要优势在于能更好的控制元素大小。（一般百分比应用在布局层，一般常见设置为50%，33.3%，25%之类的整数居多，难以运用在复杂的页面小部件内）。
但是相比百分比布局，需要借助JS或mediaquery实现，略有一点瑕疵。
DEMO地址
4、图片自适应
刚说完REM布局，那么用百分比布局也能实现一样的效果，但是用百分比布局，必须要面临一个问题：图片宽度100%，页面加载时会存在高度塌陷的问题。.
那么可以用padding-top设置百分比值来实现自适应。
公式如下：
padding-top=(ImageHeight/ImageWidth)*100%
原理：padding-top值为百分比时，取值是是相对于宽度的。
相关代码实现：
<divclass="cover">
<imgsrc="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg"alt=""/>
</div>
.cover{position:relative;padding-top:100%;height:0;overflow:hidden;}
.coverimg{position:absolute;top:0;width:100%;}
DEMO地址，缩放浏览器窗口看看。
5、图片高清化
大家都知道，iphone6plus是3倍高清图了，它的devicePixelRatio=3。
在ios8下，已经开始支持img的srcset属性了（目前移动端也就ios8开始支持），也就是说，可以对一张图片设置2个URL，浏览器自动加载对应的图片。
黄色表示仅支持旧的srcset规范，绿色表示支持全新的srcset规范，包括sizes属性，w描述符。这里不展开，详细了解可自行google。
不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。
6、背景图高清化
mediaquery实现高清化
img标签的高清化，可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片，但是对于背景图，写在CSS中的，用JS来判断就略麻烦了，还好CSS通过mediaquery也能判断dpr。
目前兼容性最好的背景图高清化实现方式，使用mediaquery的-webkit-min-device-pixel-ratio做判断：
/*普通显示屏(设备像素比例小于等于1)使用1倍的图*/
.css{
background-image:url(img_1x.png);
}
/*高清显示屏(设备像素比例大于等于2)使用2倍图 */
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){
.css{
background-image:url(img_2x.png);
}
}
/*高清显示屏(设备像素比例大于等于3)使用3倍图 */
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){
.css{
background-image:url(img_3x.png);
}
}
进一步，可以通过工具生成相应的3x，2x，1x的图片及css，在使用时直接引用即可。谁搞一个？
关于移动设备的-webkit-min-device-pixel-ratio值，可以查看该网页的整理：http://bjango.com/articles/min-device-pixel-ratio/
image-set实现高清化
image-set，它是Webkit的私有属性，也是Css4的一个属性，它是为了解决Retina屏幕下的图像显示而生。
使用方式也很简单。伪代码如下：
.css{
background-image:url(1x.png); /*不支持image-set的情况下显示*/
background:-webkit-image-set(
url(1x.png)1x,/*支持image-set的浏览器的[普通屏幕]下*/
url(2x.png)2x,/*支持image-set的浏览器的[2倍Retina屏幕]*/
url(3x.png)3x/*支持image-set的浏览器的[3倍Retina屏幕]*/
);
}
目前移动端的支持程度来看，ios7+，android4.4+下已经支持了。如果仅仅是做ip6+的高清适配方案。image-set也是一种实现方案。
使用image-set与mediaquery实现有什么区别及好处？
这篇文章里面做了很详细的阐述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大体的意思是：image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。这就意味着，如果在低网速下，浏览器可以选择加载低分辨率的图片。（PS：好智能的样子）
但是相比如mediaquery的实现，image-set仅支持单个图片的高清化，不适合在csssprite下使用。并且兼容性也是一大硬伤。
但是一般来说，用在LOGO区域，单个图片图标的区域下，也是个不错的选择。
7、图片列表的自适应
关于适配，也就是要让布局更灵活，在电商网站里面，商品列表是一个非常常见的结构。
一种比较智能的列表方式是：两端对齐，间距自适应。
那么可以使用FLEXBOX布局来实现两端对齐的效果，也可以使用text-align:justify的方式实现。
先看个flex实现的例子，主要通过justify-content:space-between，来实现：
flexbox的布局方式，在PC端就不合适了，ie9以下都不支持，那么更友好的方式可以使用text-align:justify来实现，兼容各大主流浏览器，包括IE6。
但是这2种布局方式都有一定的局限性。就是列表个数必须凑整。目前还没找到一种能够兼容不限个数的实现方案，如果各位看官有更好的实现方式，也欢迎提出，一起交流。
移动端ip6的适配方案有很多，没有固定的套路及方法，请根据自身业务的特点，选择其中的一些方法组合使用。
跨无忧（www.kuawuyou.com）来自“跨屏无忧”的想法，我们首个推出永久的、不依赖第三方的跨屏幕适配方案，希望以我们专业的力量帮助每个企业都能实现在移动互联网的转变，让企业网站轻松无忧完成到移动设备的跨屏幕适配，快速抓住移动互联网机遇。

Ⅶ 能自适应win8.1笔记本的宽屏分辨率么

Ⅷ 怎样低成本的实现网页在移动端的适配

解决方案涉及到的知识点： viewport 媒体查询(media query) Javascript window.matchMedia 响应式图片栅格布局顶部导航测试工具 iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media query技术实现网站的响应性。

在<head>之中添加viewport元数据标签。

width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。

initial-scale 表示初始缩放。

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大缩放比例，1意味着不能进行缩放。

user-scalable=no
禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。

注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒体查询(media
query)

根据不同的分辨率，引用不用的css

Css代码

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px)"

href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的实现

Js代码

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解决的确很方便，但某些场景下仍然需要JS技术。

Js代码

if (window.matchMedia("(min-width: 400px)").matches) {

// The screen width is 400px or wider.

} else {

// The screen width is less than 400px.

}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

状态改变时监听

Js代码

function setup_for_width(mql) {

if (mql.matches) {

// The screen width is 400px or wider. Set up or change things

// appropriately.

} else {

// The screen width is less than 400px. Set up or change things

// appropriately.

}

}

var width_mql = window.matchMedia("(min-width: 400px)");

// Add a listener for when the result changes

width_mql.addListener(setup_for_width);

// And share the same code to set things up with our current state.

setup_for_width(width_mql);

导航:首页 > 操作系统 > androidmediaquery

androidmediaquery

与androidmediaquery相关的资料