CSS响应式布局

基本的概念

一个网站可以兼容多个终端，针对不同终端设置不同的样式。 
优点：

  1. 面对不同分辨率设备灵活性强；
  2. 能够快捷解决多设备显示适用问题；

缺点：

  1. 兼容各种设备，效率低下；
  2. 代码累赘；

实现响应式布局的三种方式

    1. CSS3-Media Query（最简单的方式，但是无法满足很多需求）

    2. 借助原生Javascript（成本高，不推荐使用）

    3. 第三方开源框架（比如bootstrap,可以很好的支持浏览器的响应式布局）

设置meta标签

在完成非响应式布局后，需设置meta标签来告诉浏览器，让视口宽度等于设备宽度，而且禁止用户缩放行为。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
这里视口的设置需要注意的是，视口就是可见的屏幕尺寸；设置视口时只设置宽度，而不在乎高度，这是因为高度由内容自动撑开。

具体含义如下：

  1. Width: 控制viewport的大小。如device-width为设备的宽度。
  2. initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
  3. maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
  4. minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
  5. user-scalable： 用户是否可以手动缩放，值可以是:

媒体查询应当怎么写呢？

CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式

媒体查询 @media

媒体设备：all所有设备 screen所有屏幕设备（PC+移动端） print打印机设备。
媒体条件：指定在什么样的条件下指定对应样式 。

方式一：（嵌入式css样式——这种是不推荐的，这样会使得html页面代码太繁琐）：

<style type="text/css">
@media screen and (max-width:768px){

//当屏幕宽度小于768px时，加载这里的样式
}
@media screen and (min-width:368px){

//当屏幕宽度大于368px时，加载这里的样式
} 

@media screen and (min-width:300px) and (max-width:600px){

//当屏幕宽度大于300px且小于600px时，加载这里的样式

}

@media all and (-webkit-device-pixel-ratio:2){

//二倍屏

}

</style>


方式二：（外部式css样式）

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./font_icons/fonts.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />
</head>
注：书写顺序一定不能差

在真实项目中，设计师的设计稿一般是：640*1136 或 640*960 或 750*1334。

CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式。

@media screen and (min-width:480px) 手机

@media screen and (min-width:768px) 平板

@media screen and (min-width:992px) 桌面显示器

@media screen and (min-width: 1200px){ 选择器{ 属性：值; } }  大于1200px时

这四个值是常用的，注意先后顺序，小的在前大的在后。

 手机类型：      分辨率

 小米3      1080*1920

 小米2      720*1280

 红米Note      720*1280

 魅族4      1152*1920

 魅族3      1080*1800

 魅族2      800*1280

 iphone6      750*1334

iphone5s       640*1136

iphone4s       480*800

 iphone3s      320*480

 三星      720*1280

 三星      480*800

响应式的技术实现？

1.流体布局
      其实就是度量单位的改变。在响应式设计的布局中，不在把像素(px)作为唯一的单位，而是采用%或者是混合%、px为单位，设计出自己想要的布局方式。

2.媒体查询
        媒体查询可以在你根据特定的环境下查询到各种属性---------比如设备类型，分辨率、屏幕物理尺寸以及色彩等。通过使用媒体查询，可以获得设备的一些特性，以及响应式的布局方案。
3.弹性图片
        其实在做响应式布局时，大多用到的是弹性盒子进行布局，那么在设置图片的地方也应该具有一些变化以适应布局的变化。出了图片外，像图标啦！视频啦也应做一些调整用以适应布局的变化。

流式布局法

  1. 容器或者盒子的宽度一般都不是固定的值，而是使用百分比，相对于视口区域的百分比。
  2. 其余的样式：字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置。
  3. 对于有些屏幕尺寸下，设置的固定值不是特别好看的话，使用@media进行微调整。

图片处理

1. 对于背景图片来说，css3有个属性 background-size可以等比例缩放背景图片。

但是对于小屏幕的移动设备去加载大背景图片的话，有缺点的，最主要的缺点是要更大的带宽，浪费流量。所以我们要想做的更好的话，可以使用媒体查询根据设备的宽度来渲染不同大小的背景图片。

 

对于页面上的<img/>标签图片的话：

1. 如果只是页面上静态图片的话，不考虑带宽的情况下，可以使用width=100%”等比例缩放，如：<img src=”XX.png” width=”100%”/>

2. 如果是商品图或者页面上有多个的话，考虑不浪费不必要的带宽，需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端，之后我们前端使用JS动态的渲染出来。

带宽是手机端必须要考虑的问题，如果将PC端上的大图放在手机端，手机用户请求图片文件时，文件体积大，消耗流量多，请求事件长，这样的用户体验一定不好。所以就得把图片也处理成响应式的，根据终端类型尺寸分辨率来适配出合理的图形。

有两个解决方案，一个是看到有文章介绍的W3C的一个用于响应式图形的草案：新定义标签<picture>，因为是草案可以学习学习，这里就不赘述了，自行百度谷歌bing吧~ 另一个方案是图片液态化。

在html页面中的图片，可以通过css样式max-width来进行控制图片的最大宽度。img { max-width:100%; }

含义是：确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，所以当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片本身永远不会覆盖容器。

理解css单位px，em，rem的区别

1.  Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。

2.  em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如：

3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。

比如设置html根元素 如下代码：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：

p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

元素未知宽度居中

我们先来介绍一下未知宽度，元素居中的方法，对于响应性web设计是有帮助的，我们可以来了解下。

第一种方法：

假如页面html结构如下：

<div>

<p>What is CSS?</p>

</div>

只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码：

div{text-align:center}

p{display:inline-block}

 

第二种方法如下：

div{position:relative; left:50%; float:left;}

p{position:relative; left:-50%;}

需要注意的细节点

本文开始也说过，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑。也就是兼容性问题、字体尺寸单位、视口宽高的设置、图片的处理、表单的处理…

1、兼容性问题
IE6、IE7、IE8是不支持媒体查询的。
解决方案：css3-mediaqueries.js。引入此文件可以解决IE6-8无法实现响应式媒体查询的尴尬。

2、字体尺寸单位
css3引入了新的单位叫做rem，rem是相对于根元素的，不要忘记重置根元素字体大小

html{font-size:100%;}

完成后，就可以定义响应式字体：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

3、视口宽高的设置
不同设备，不同宽度。宽度不固定，可以使用百分比。
 

做移动端项目之前的准备

常用的META标签(移动端)
忽略数字自动识别为电话号码：
<meta name="format-detection" content="telephone=no"/>

把页面增加到桌面主屏幕：
在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面。(只对IOS有效)

WebApp全屏模式：
<meta name="apple-mobile-web-app-capable" content="yes"/>

设置状态栏颜色：
只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的，即白色，网页从状态栏以下开始显示) | black(状态栏将为黑色，网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上)。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

添加到主屏后的图标：
<link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
IOS系统中对ICON有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。rel=”apple-touch-icon-precomposed”是设定按照设计稿原图的图标显示，rel=”apple-touch-icon”是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

添加到主屏后的标题：
<meta name="apple-mobile-web-app-title" content="标题"/>

添加智能App广告条 Smart App Banner(不常用)：
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>

QQ浏览器(X5内核)独有的META：
<meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->设置全屏

UC浏览器独有的META：
<meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="full-screen" content="true"/> //->设置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条 <meta name="nightmode" content="enable|disable"/> //->夜间模式

强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个<img src="" show="force"/>

<meta name="imagemode" content="force"/>

使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

<meta name="browsermode" content="application"/>

posted @ 2019-12-18 10:25  圆圆测试日记  阅读(2017)  评论(0)  编辑  收藏  举报