笔记-布局方式
.a.固定布局
以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸,如网页的主体部分宽度为960px,某个搜索框的宽度为60px,缺点就是不能根据用户的不同屏幕尺寸做出不同的表现;
b.可切换的固定布局
同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;
c流式布局、百分比布局
0.左侧固定,右侧自适应,左右定宽,中间自适应
1.宽高使用百分比,加以max-和min-辅助,在屏幕尺寸差异不大的情况下使用,在当今的移动端开发上也是常用的布局方式,缺点是:宽度使用百分比,但是文字和高度使用px,会导致页面宽度被拉的很长,但是文字大小还是和原来一样;并且大小发生变化了,但是位置没有发生变化。
c.弹性布局
1.以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;
2.包裹文字的各元素的尺寸采用em或者rem做单位,而页面的主要划分区域的尺寸仍然使用百分数或者px,可以使包裹文字的元素随文字的缩放而缩放。
3.使用rem的话,通过媒体查询或者js,控制不同屏幕下的html的字体元大小。
d.混合布局
同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。
E.响应式布局 = 自适应布局 + 流式布局 —针对web端
1.需要对相同的内容进行不同宽度的样式设计,最主要的是需要找准一个临界点,然后通过对区域进行挤压、换行、增删增方式来实现。
F.自适应布局—移动端
1.分别为不同的屏幕分辨率定义布局,但是在同一分辨率下,页面的元素不会随着窗口大小的改变而该改变。其特点是在不同屏幕分辨率下,页面元素内容和布局不随窗大小的调整而发生太大的变化,宽度和图片保持自适应,内容不会被遮挡,不会出现滚动条,避免出现需要用手放大,拖拽的情况;
G.多种方式实现瀑布流布局
1.原理:先计算出一排能容纳几列元素,然后寻找搁列之中所有元素高度之和的最小者,并将新的元素添加到该列上,继续寻找所有列中高度之和的最小者。
使用@media来设置html的font-size的临界点大小的时候会有一种卡顿的感觉
而使用js的话,又要保证加载体验,需要头部内敛,为了保证实时性又要在多个浏览器上监听事件变化;
所以就有了两全其美的办法:vw,配合着calc计算来实现动态字体大小效果;
html{font-size:cal(18px + 4 * ( 100vw - 600px ) / 400 ) ; },当屏幕宽是600px的时候,100vw就是600px,1000px的时候,100vw就是1000px;
18px还可以换成112.5%
.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}