HTML笔记（八）CSS兼容和响应布局

最新推荐文章于 2020-05-09 10:53:23 发布

原创最新推荐文章于 2020-05-09 10:53:23 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文详细介绍了浏览器内核的兼容性问题，包括不同浏览器的前缀、IE低版本的CSSHack解决方案，以及如何使用媒体查询进行响应式布局设计。同时，探讨了阻止移动浏览器自动调整页面大小的方法和多列布局的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兼容

一、厂商前缀
浏览器厂商前缀浏览器内核
火狐 -moz- gecko
IE -ms- trident(IE内核)
谷歌，苹果 -webkit- webkit（谷歌已经弃用）
欧朋 -o- presto（欧朋已经弃用）
blink内核现在谷歌和欧朋

二、浏览器内核以及其前缀
1.Gecko内核前缀为-moz- 火狐浏览器
2.Webkit内核前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3.Trident内核前缀为-ms- 也称IE内核
4.Presto内核前缀-o- 目前只有opera采用 Opera现已改用Google Chrome的Blink
5.Blink内核 Blink是一个由Google和Opera Software开发的浏览器排版引擎

三、解决IE低版本兼容性（css hack）
1、条件注释

<!--[if ]>
    代码块
<![endif]-->

2、属性前缀或者后缀

- _    *     #   \0    \9    \9\0

3、!important 优先级最高

针对于在不同浏览器上的bug的解决方案。一般都是利用各浏览器的支持CSS的能力和BUG来进行的。尽量找到通用方法而减少对CSS Hack的使用。

常用的几个hack，主要仅针对IE浏览器，IE6以下不再考虑。

4、条件hack
实例1

<!--[if IE 9]>
<style>
	body{ background-color:orange; }  //在IE9下，背景颜色为橘色
</style>
<![endif]-->

示例2

<!--[if IE]>
     <p>如果你使用IE浏览器将能看到我</p>   //在IE浏览器显示段落p
<![endif]-->

示例3

<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

大于ie6版本的.test类字体为红色

通过上面三个例子我们可以发现：
条件注释它的格式为

<!--[ if 条件 ]>
	代码块
<![ endif ]-->

条件
大于 gt
大于或等于 gte
小于 lt
小于或等于 lte
非指定版本！
这些条件帮我们更精确的筛选浏览器版本

5、属性级Hack
同一段文字在IE6,7,8显示为不同颜色

.test{
	_color:#ff0;       /* IE6 及以下*/
	*color:#f00;       /* IE7 及以下 */
	color:#090\9;     /* IE6 及以上 */
	}

<p class=”test”>this is paragraph!!</p>

响应式布局

一、媒体查询
1、Media Query
使用Media Query的基本语法

@media media-type  and|not|only (media feature) {
       CSS-Code;
 }

以上通过@media定义媒体查询，media-type代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。
@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。

2、媒体类型有：
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备

例子
1）pc端

 @media screen and (min-width: 992p{body{  }}

2）ipad端

   @media screen and (min-width: 769px) and (max-width: 991px){ body{  } }

3）移动端

 @media screen and (max-width: 768px) { body{  }}

二、阻止移动浏览器自动调整页面大小
只需要在HTML的标签中插入一个标签，meta标签中可以设置具体的宽度或缩放比。
下面为示例
1）

<meta name="viewport"  content="initial-scale=2.0,width=device-width" /> 
	name=”viewport”  说明此meta标签定义视口的属性
	initial-scale=2.0   意思是将页面放大两倍
	width=device-width   告诉浏览器页面的宽度等于设备宽度

2）允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半

<meta name=”viewport” content=”width=device-width maximum-scale=3, minimum-scale=0.5”/>

3）禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放

<meta name=“viewport” content=”initial-scale=1.0, user-scalable=no”/>  
 //user-scalable=no是禁止缩放

多列布局

multi-column

多列有这么几个常用属性
column-count 分几列
column-gap 列间距
column-rule 列分割线的样式