最近的文章列表

响应式布局@media only screen and 设备像素比率(-webkit-min-device-pixel-ratio)

常见屏幕参数

  • 设备 分辨率 设备像素比率
  • Android LDPI 320×240 0.75
  • Iphone 3 & Android MDPI 320×480 1
  • Android HDPI 480×800 1.5
  • Iphone 4 960×640 2.0

iPhone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样,模糊不清晰。

解决办法:

1、页面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
2016/2/27 Comments:
详解:CSS3 响应式布局 Media Queries 媒体查询

css3 响应式布局定义

响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化

响应不同的设备

涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询”

Media Queries 用法如下:

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />

或者另外一种引入css 文件的方法

<style type="text/css" media="screen">
@import url("css/style.css");
</style>
2015/9/25 Comments: