跨终端响应式页面设计入门

最新推荐文章于 2024-07-20 10:05:09 发布

转载最新推荐文章于 2024-07-20 10:05:09 发布 · 571 阅读

web前端同时被 2 个专栏收录

5 篇文章

订阅专栏

css

3 篇文章

订阅专栏

@media only screen and (max/min-width/height: 960px) {
  /* 样式定义 */
}

一、

⑴ IE8-不能识别HTML5的<hearder>、<article>、<footer>、<figure>等标签，可以通过 html5.js 来解决：

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

然后将下面代码写入你的base.css来格式化html5标签：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

⑵ IE8-不支持CSS3 media queries，即不支持"@media only screen"语法，可以通过 css3-mediaqueries.js 来解决：

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

(3)

<style>
html, body {
    magin: 0;
    padding: 0;
}
.outDiv {
    margin: 0 auto;
    width: 85%;
    height: 50%;
    background: red;
}
</style>

高度未生效，解决办法：

给外层元素"bady,html"添加一个 height:100% 的样式即可。

（二）禁用移动端设备的部分特性（非必要，按需使用）

⑴ 禁用viewport缩放功能

在页面头部加上如下语句来禁用viewport的缩放特性（响应式页面基本是按百分比来布局和适配的，用户缩放页面反而影响阅读效果）：

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

如上我们设置viewport初始化时便适配设备浏览器的宽度，且无法缩放，该meta标签具体参数如下：

width：viewport 的宽度，可以指定一个固定值，如650；或者可以是device-width，表示设备的宽度。
height：和 width 相对应，可指定高度。
initial-scale：页面初始缩放比例(0-1)
maximum-scale：允许用户缩放到的最大比例(0-1)
minimum-scale：允许用户缩放到的最小比例(0-1)
user-scalable：用户是否可以手动缩放（yes/no）

上述meta标签可能会在旧版的iphone中导致布局错误的问题，因为旧版的iphone会默认把页面做980宽度渲染，但最终以320宽度显示，我们可以再接着加一句meta标签来兼容（让iphone以320的宽度来渲染页面）：

<meta name="MobileOptimized" content="320">

⑵ 禁用Webkit文本调节功能

禁用该功能的途径是使用-webkit-text-size-adjust 来设置（chrome28+已失效）：

body {
    -webkit-text-size-adjust: 100%;
}

（三）CSS3 media queries

CSS3 media queries（后简称为CMQ）算是响应式页面设计的一把瑞士军刀，可以把你的页面在不同分辨率的环境下雕琢成对应的、最好看的轮廓，掌握了CMQ也算是掌握了响应式页面设计的基础。
CMQ在样式文件中的使用很简单，其语法为

@media only screen and (max/min-width/height: 960px) {
/* 样式定义 */
}

其中橙色高亮的 “only screen” 参数表示限定当访问环境（媒体类型）为彩色屏幕设备时才生效。

除非该参数数值为all，否则可以在前面加个only限定类型。对于移动端和PC端，我们只需设为 "screen" 或 "only screen" 即可，建议使用后者，其语义更为严谨。

@media only screen  and (mix-width:500px) and (max-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

//设备宽

@media only screen and (max-device-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

原文链接：http://www.cnblogs.com/vajoy/p/3903591.html