前端面镜-布局方式

笔记-布局方式

.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来设置htmlfont-size的临界点大小的时候会有一种卡顿的感觉

而使用js的话,又要保证加载体验,需要头部内敛,为了保证实时性又要在多个浏览器上监听事件变化;

所以就有了两全其美的办法:vw,配合着calc计算来实现动态字体大小效果;

html{font-size:cal(18px + 4 * ( 100vw - 600px ) / 400 ) ; },当屏幕宽是600px的时候,100vw就是600px1000px的时候,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+ */

 }

你可能感兴趣的:(前端面经,html,前端,布局)