Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)相关的知识,希望对你有一定的参考价值。

参考技术A

优点:兼容性好;
不足:需要同时设置子元素和父元素;

优点:兼容性好
缺点: 需要指定宽度

优点:只需要对自身进行设置
不足:IE6,7需要调整结构

不足:兼容性差,IE9及以上可用

缺点:兼容性差,如果进行大面积的布局可能会影响效率

在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;

该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局

注:IE6会有3px的bug

如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高

利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等

基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应

多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。

html结构如下所示

rem自适应布局的回顾总结

使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗?rem的根html font-size设置为多少合适?看看这篇文章,也许能帮到你。

这些问题整理来自之前发表过的文章,细心的读者也可以自己翻翻之前的内容找到答案,本文统一给个回复,如果对你有用,还请点个赞,谢谢!

rem自适应原理

rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局。更多介绍请看这篇文章:rem是如何实现自适应布局的

rem的值

目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem,rootStyle;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) {
			width = maxWidth;
		}
		//与淘宝做法不同,直接采用简单的rem换算方法1rem=100px
		var rem = width * 100 / designWidth;
		//兼容UC开始
		rootStyle="html{font-size:"+rem+‘px !important}‘;
		rootItem = document.getElementById(‘rootsize‘) || document.createElement("style");
		if(!document.getElementById(‘rootsize‘)){
		document.getElementsByTagName("head")[0].appendChild(rootItem);
		rootItem.id=‘rootsize‘;
		}
		if(rootItem.styleSheet){
		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
		}else{
		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
		}
		//兼容UC结束
		docEl.style.fontSize = rem + "px";
	};
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(640, 640);

你可以把上面的代码内嵌到html的head中,换算比例是1rem=100px,为了计算方便,你可以在我的一个github项目下载完整的结构和一个压缩的js。

项目主页

上面代码中的关键代码是:

var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";
  • 第一行代码,获取移动设备的宽度,第二行,rem的值等于(设备的宽度)x100/(设计稿宽度),第三行,设置html的字号为第二行的值。
  • 有些人可能会注意到第二行代码跟淘宝的那个有所区别,区别就在于rem的换算比例,这里你可以任意改动为实际中的情况,比如有人喜欢用20px,那你可以将上面的100改为20,换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章:Rem精简版实现自适应
  • 还有的人要用回淘宝的那个,那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了,假设我们的设计稿宽是640的,则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章:rem自适应布局-flexible

使用媒体查询

说到底,上面的js代码不就是根据不同的设备调整对应的html字号嘛,那么我们根据实际的设备,来加上相应的字号不就行了吗?

我们知道html的默认字号是16px,则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

html {
font-size: 62.5%
}

@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}

@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}

@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}

body {
max-width: 640px
}
}

上面的代码则是通过1rem=20px来换算的,从哪里看出来呢?从最大的一个值640出发,假如你的设计稿是750的话,那你还要设计更多的媒体 查询,换算比例保持一致就可以了。那如果我想要换算比例为1rem=100呢?按照上面的规则,最大的值为:html:font- size:100/16*100%,其它的则按比例,比如480px,则为480/640*(100/16*100%)。

使用雪碧图

国内的很多人都提倡使用字体图标或者用SVG的方式来实现,但这些在小项目中明显是有点不实际。我通常使用下面两种方式。

  1. 第一种将背景图片切成一个,然后换算成base64.的方式,或者使用sass的方式转换,不过有弊端就是样式文件会增大,看个人衡量。
  2. 第二种则是通过背景图片的百分比精准定位,详情见这篇文章:CSS3背景图片百分比及应用
  3. 或者对于精准度不太高,其实使用rem定位也可以,就是要把相邻图片隔开些。

本文后面将继续更新关于rem实现自适应的相关问题,如果你有问题,还请留言给我。

原文链接:rem自适应布局的回顾总结 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/rem-responsive-2.html)

以上是关于Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)的主要内容,如果未能解决你的问题,请参考以下文章

HTML与CSS布局技巧总结

rem自适应布局的回顾总结

你不知道的CSS---position小技巧

2017.10.23学习知识总结回顾及编写新网页

Html和CSS布局技巧

Html和CSS布局技巧