响应式布局

响应式页面的基本写法:

—— 创建通用非响应式页面,可以将页面设置固定宽度,完成后添加媒体查询(@media)及响应代码。

1、首先应设置好 <meta> 标签。例如:

1 // 屏幕1:1显示,阻止用户缩放
2 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
3 // 用来指定IE8浏览器去模拟chrome内核的渲染方式
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 //  针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
6 <meta name="HandheldFriendly" content="true">

2、媒体查询(media query)

  使用媒体查询可以针对不同的媒体类型定义不同的样式。

  常用的属性包括 屏幕宽度 和 屏幕方向,例如:

1 // ipad
2 @media only screen and (min-width:768px)and(max-width:1024px){}
3 // iphone
4  @media only screen and (width:320px)and (width:768px){}

  ① @media 语法:

    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

  ② mediatype 媒体类型最常见的 screen,用于电脑屏幕,平板电脑,智能手机等。

  ③ 逻辑关系包括 and:与,not:非,和 only:仅限于。

  ④ media feature 媒体属性,常见的包括尺寸属性,如例子中的 min-width 和 max-width;

           屏幕方向(屏幕高宽的关系)orientation属性,表示输出设备中的页面可见区域高度是否大于或等于宽度。它的值有两个,portrait 指竖屏;landscape 指横屏。

3、内容处理

  ① 页面元素的尺寸

  px像素应该是最常用的尺寸单位。响应式页面可以选用定比缩放百分比尺寸设置等方法,css3引入了 rem,更好的保证响应式页面中元素的相对比例更加协调,更方便于响应式开发。

    •   rem —— 相对于元素的字体大小的单位,一般在 html 中设置根字体大小
    •   em —— 相对于元素的字体大小的单位

  技巧:图片,容器等尺寸设置,宜灵活得使用 max-width, min-width,宽高 100% 或 auto等方法;背景图片的 background-size属性,可以设置 cover(等比扩展填充,有时超出部分被隐藏)、contain(等比填充不扩展,有时尺寸较短方向会留白)。

 
posted @ 2017-08-24 18:28  hiker90  阅读(119)  评论(0编辑  收藏  举报