最近的文章列表

解决Web移动端Fixed布局的方案(防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js)

一些细节处理

在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下:

  1. 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。
  2. 在 iOS 下使用第三方输入法时,输入法在唤起经常会盖住输入框,只有在输入了一条文字后,输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。
  3. ...
2016/5/24 Comments:
响应式布局@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: