css 响应式布局

时间 2019-11-09

标签 css 响应布局栏目 CSS 繁體版

原文原文链接

http://www.missyuan.net/school/web_2013/web_10748.htmlcss

一.使用HTML中的viewport来实现

viewport语法以下：

HTML代码


<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = 0.5 ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ," />

（1）width

控制 viewport 的大小，能够指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 html

CSS 的像素）。

（2）height

和 width 相对应，指定高度。

（3）initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，若是你设置初始缩放为“1.0”，那css3

么，web页面在展示的时候就会以target density分辨率的1:1来展示。若是你设置为“2.0”，那么这个页面就会放大为web

2倍。

（4）maximum-scale

最大缩放。即容许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，若是你chrome

将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

（5）user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。若是设置为yes则是容许用户对其进行改变，反之为no。默认值是yes浏览器

。若是你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，由于根本不可能缩放。

(6)设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
HTML代码：

<meta name="viewport" content="width=device-width,user-scalable=no" />

(7)设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

HTML代码:

<meta
name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial- scale=1.0, ide

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
注：1). 全部的缩放值都必须在0.01–10的范围以内。
2). minimum-scale、maximum-scale要么写值，要不留这两个

二.不使用绝对宽度

因为网页会根据屏幕宽度调整布局，因此不能使用绝对宽度的布局，也不能使用具备绝对宽度的元素。这一条很是布局

重要。
具体说，CSS代码不能指定像素宽度：
　　width:xxx px;
只能指定百分比宽度：
　　width: xx%;
或者
　　width:auto;字体

三.CSS的@media规则
（1）同一个CSS文件中，也能够根据不一样的屏幕分辨率，选择应用不一样的CSS规则。

HTML代码
@media screen and (max-device-width: 400px) {
　　.column {
　　　　float: none;
　　　　width:auto;
　　}
　　#sidebar {
　　　　display:none;
　　}
}

上面的代码意思是，若是屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

（2）media查询特性：
width 视口宽度flex

height 视口高度

device-width 设备屏幕的宽度

device-height 设备屏幕的高度

orientation 检测屏幕处于横屏仍是竖屏

aspect-ratio 基于视口的宽高比例

device-aspect-ratio 基于设备屏幕的宽高比

color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色

color-index 设备的颜色索引表中的颜色数

monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3

resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也能够是每厘米像素点的度量值，如min-resolution：120dpcm

scan 扫描方式，值为progressive(逐行扫描)、interlace(隔行扫描)

grid 检测输出设备是网格设备仍是位图设备

（3）针对不一样分辨率：
中分辨率屏幕：@media(-webkit-min-device-pixel-ratio:1){css代码}
高分辨率屏幕：@media(-webkit-min-device-pixel-ratio:1.5){css代码}
超高分辨率屏幕：@media(-webkit-min-device-pixel-ratio:2){css代码}

四．流动布局
各个区块的位置都是浮动的，不是固定不变的。

HTML代码

　.main {
　　　　float: right;
　　　　width: 70%;
　　}
　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

float的好处是，若是宽度过小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向

overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要很是当心。

五. 图片的自适应
图片的宽度和高度要按百分比来设定，千万不能够设定成固定大小。

HTML代码

<img width="95%" src="" alt="" />

六.css3的新属性: display：-webkit-box

(1)属性：
webkit-box-orient：子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列
-webkit-box-flex ：子元素之间比例，仅做一个系数
-webkit-box-direction ：子元素排列顺序 normal | reverse | inherit，其中默认值是normal
-webkit-box-flex-group ：以组为单位的流体系数
-webkit-box-ordinal-group ：以组为单位的子元素排列方向
-webkit-box-lines：子元素是否换行，相似word-wrap和word-break的做用
-webkit-box-align ：子元素垂直方向的对其方式
-webkit-box-pack ：子元素水平方向的对其方式

（2）例子：父元素被一、二、3均分，且2和1之间间隔10px
HTML:
CSS:

怎么理解上面的代码呢，父亲有一块地，要分给兄弟几个，除去老大和老二之间的分割线所占的那块，剩下的部分均分的分数由li的兄弟个数和box-flex的总数肯定，如今一共三兄弟，每兄弟的box-flex都是1，因此就总分数=1*1+1*1+1*1=3.
若是代码稍做修改:

那么如今老二的box-flex是2了，总分数就是1*1+1*2+1*1=4，其中老大老三各占一份，老二占两份，显示效果以下：

-webkit-text-size-adjust:none
设置在屏幕横屏的时候字体不自动变大
字级单位：rem
咱们以前用em、百分比的时候遇到的问题就是计算，并且当嵌套的层级太多时就会很是难以把控，而用px则被固定死了，
如今咱们用rem彻底不用担忧这个问题，由于rem的参照对象只有根节点。咱们只需设置根节点的大小，全部子节点都只需参照它来设计就能够，下面是px、em、百分比和pt的对比

咱们只需设置html根元素字体大小为75%，对应的px值就是12，这样咱们能够很方便的设置页面的宽高和字体大小，固然单位是rem，这样参考对象才会永远是html而不是父元素，当须要变化的时候，只需改变html的大小其余的元素都会相应变化，方便极了。
Px,em,rem的区别
PX特色
1. IE没法调整那些使用px做为单位的字体大小；
2. 国外的大部分网站可以调整的缘由在于其使用了em或rem做为字体单位；
3. Firefox可以调整px和em，rem，可是96%以上的中国网民使用IE浏览器(或内核)。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，须要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只须要将你的原来的px数值除以10，而后换上em做为单位就好了。

EM特色：
1. em的值并非固定的；
2. em会继承父级元素的字体大小。

好比说你在#content中声明了字体大小为1.2em，那么在声明其子元素p的字体大小时就只能是1em，而不是1.2em, 由于此em非彼em，它因继承#content的字体高而变为了1em=12px。避免1.2*1.2 = 1.44

rem特色
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，全部浏览器均已支持rem。

-webkit-box-sizing:border-box: 指定该盒子的大小包括边框的宽度当咱们指定了一个块级元素时，而且为其定义了边框，设置了其宽度为100%。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，致使出现横向滚动条，这时候咱们能够为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。