【随笔】IFE-task8小记(关于自适应布局)

最新推荐文章于 2024-06-11 09:59:03 发布

chihuofei

最新推荐文章于 2024-06-11 09:59:03 发布

阅读量266

点赞数

分类专栏：前端文章标签： IFE bootstrap 响应式 media查询

本文链接：https://blog.csdn.net/u013218606/article/details/51016108

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于任务：

这个任务主要是让你模拟bootstrap的响应式布局的方式来完成自适应布局，楼主还没去看bootstrap源码，自己查阅了任务中给的参考链接，经历了一些小bug终于完成了！现对编写过程中的一些收获和易忘的知识点进行总结。

任务地址：http://ife.baidu.com/task/detail?taskId=8

完成的代码地址（没有几行，但是许多地方的css都是布局的关键）

总结：
1.学习了一种css选择器方法（之前没用过）

    [class*='col-'] {
        float: left;
        min-height: 1px; 
    }

类名以‘col-’开头的所有类

2.css的calc()函数的注意事项

千万别忘记在用"+" "-"号的时候左右要加空格

即

<span style="white-space:pre">	</span>width: calc(8.333% - 20px);

是可以的

而

<span style="white-space:pre">	</span>width: calc(8.333%-20px);

是不可以的

3.自适应的主要方法

在宽度上尽量用百分比再配合calc()函数实现，即尽量不要使用绝对宽度，字体也尽量要使用相对大小(em)，要注意padding和margin的使用，否则可能会造成宽度溢出。css使用@media媒体查询的方法进行添加不同屏幕大小的样式。布局使用float 或者flex来实现自适应。

4.row和container使用display:table

使外层容器可以容纳里面float的内容。

关于display table：

<span style="white-space:pre">	</span>“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

一些可用值：

table 使该元素按table样式渲染
table-row 使该元素按tr样式渲染
table-cell 使该元素按td样式渲染
table-row-group 使该元素按tbody样式渲染
table-header-group 使该元素按thead样式渲染
table-footer-group 使该元素按tfoot样式渲染
table-caption 使该元素按caption样式渲染
table-column 使该元素按col样式渲染
table-column-group 使该元素按colgroup样式渲染
注意：使用css的table布局虽然可以快速进行一些栅格化布局，但是会破坏web的标准化，所以视具体情况而用。

5.使用box-sizing:border-box

使用 box-sizong:border-box 来使border边框不再重新占用像素，而是在已经设定好的高度宽度内。避免width不够而溢出的情况。

box-sizing可用值：

content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

6.css3的@media查询

语法：

<span style="white-space:pre">	</span>@media mediatype and|not|only (media feature) {
    <span style="white-space:pre">	</span>CSS-Code;
<span style="white-space:pre">	</span>}

媒体类型：

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等

speech 用于屏幕阅读器等发生设备

媒体功能：

aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率

color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

grid 用来查询输出设备是否使用栅格或点阵。

height 定义输出设备中的页面可见区域高度。

max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-color 定义输出设备每一组彩色原件的最大个数。

max-color-index 定义在输出设备的彩色查询表中的最大条目数。

max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

max-height 定义输出设备中的页面最大可见区域高度。

max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。

max-resolution 定义设备的最大分辨率。

max-width 定义输出设备中的页面最大可见区域宽度。

min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。

min-color 定义输出设备每一组彩色原件的最小个数。

min-color-index 定义在输出设备的彩色查询表中的最小条目数。

min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。

min-device-width 定义输出设备的屏幕最小可见宽度。

min-device-height 定义输出设备的屏幕的最小可见高度。

min-height 定义输出设备中的页面最小可见区域高度。

min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数

min-resolution 定义设备的最小分辨率。

min-width 定义输出设备中的页面最小可见区域宽度。

monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0

orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。

resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

scan 定义电视类设备的扫描工序。

width 定义输出设备中的页面可见区域宽度。

7.viewport

<span style="white-space:pre">	</span><meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

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

--------------------------

先写这些，打算去看看bootstrap的源码，学习后再来补充。

参考链接：

1.阮一峰老师的自适应网页设计

2.主要参考的方法Creating Your Own CSS Grid System

3.基于display：table 的布局

4.CSS3的calc()使用