精选文章 HTML5 和 CSS3 的兼容问题

HTML5 和 CSS3 的兼容问题

作者:小草莓蹦蹦跳 时间: 2020-07-27 11:46:38
小草莓蹦蹦跳 2020-07-27 11:46:38

对于html5的兼容:

使用 HTML5 能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍两种方式。

方式一:Coding JavaScript

如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE9以下的浏览器就会忽视这段代码,也就不会有无谓的http请求了。


第二种方法:使用Googlehtml5shiv包(推荐)

html5.js是用来兼容h5标签的插件。




或者


不管使用以上哪种方法,都要初始化新标签的CSS。因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

 

对于CSS3的兼容:

响应式布局,理想状态是,对PC/移动各种终端进行响应。

媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。

那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js

文件下载地址:https://github.com/scottjehl/Respond(或者百度搜索respond.js)

关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。

respond.js使用步骤:

第一步,书写基本样式

要想实现响应式布局,首先需要书写基本的响应式布局的样式。

html,body {
	height: 100%;
}
@media only screen and (min-width: 480px){
	body {
		background: yellow;
	}
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
	body {
		background: green;
	}
}
@media screen and (min-width: 1024px){
	body {
		background: blue;
	}
}

接下来,需要理解respond.js的实现思路:

第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;

第二步,遍历数组,并一个个发送AJAX请求;

第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;

第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块。

 

 

 

 

 

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:go语言channel学习与总结(一)channel的一些基本用法

下一篇:DeepLearning 吴恩达深度学习第三课笔记

您可能感兴趣

  • iconfont介绍及基本使用

    在看别人 github 项目的时候,看到了 iconfont,百度了一下是阿里的图标库,这个很容易理解,但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件,对于这些新东西感到有些陌生,在经过一番查找之后有所得,整理思路,记录于此。 一、Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Lo...

  • [转]秒杀全网!研发、运营必备实用工具网站

    目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 12、音乐 13、神辅助工具 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不...

  • 原生JS和jQuery的对比使用

    1.入口函数 js: window.onload = function(){js代码} 实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。 jq: $(function(){})   $(document).ready(function(){}) 在html所有的标签都加在之后就会去执行,...

  • 使用显卡加速,把笔记本打造成取暖器!

      最近破事比较多,好久没来这里写异想天开的玩意了。不过今天早上倒是想到个很有趣的东东,所以花了半小时简单的琢磨了会,顺便写点分享下。   这天越来越冷了,冻手冻脚的~ 于是这热乎乎的笔记本正好成了烘手的利器:)      美中不足的是,平时不想它热的时候,风扇总是忽忽的转不停。现在真想让它热,倒是不给力了。   解决办法也很简单,挂个3D游戏在那,特效全开,不热也不行。不过这样很是占用系统...

  • HTML5响应式网站拥有哪些优势与特点

      在现如今,随着互联网科技飞速的发展和进步,目前说起H5响应式网站,很多人第一时间的反应是:“HTML5网站拥有丰富的展示形式”、“H5网站的功能很多”、“响应式网站能够适应不同屏幕大小分辨率的设备”、“H5响应式网站更易于优化”等等的一些观点。没错,html的网站的确确实能够解决掉很多传统网站无法实现的功能,而且具备更多的元素与特性。今天小编带详细了解下,一个html5响应式网站拥有什么...

  • 零基础入门web前端, 初级web前端应该懂什么

    很多人不明白同样身为web前端工程师,可为什么薪资待遇却是大不相同,web更注重的在于技术。那么初级web前端应该懂什么?零基础入门web前端应该学什么? 零基础入门web前端 初级web前端应该懂什么 可以把前端工程师分为了入门、初级、中级、高级这四个级别,入门指的是了解什么是前端(前端到底是什么,其实很多人还是不清楚的,到底什么是前端、后端、后台),了解基本的html、css和javas...

  • 【笔记】前端学习常见概念

    跟随百度学院学前端。 常见前端概念:HTML、CSS、JAvaScript、SQL、WebServices、PHP等。 一个普通网站访问的过程 先了解一个网站访问的大概过程: 用户操作浏览器访问,浏览器向服务器发出一个 HTTP 请求; 服务器接收到 HTTP 请求,Web Server 进行相应的初步处理,使用服务器脚本生成页面; 服务器脚本(利用Web Framework)调用本地和客户...

  • Spring 安全性:深入认证和授权

    介绍 每个人迟早都需要为他的项目增加安全性,在Spring生态系统中,您可以借助Spring Security库来做到这一点。 因此,当您继续将Spring Security添加到您的Spring Boot(或普通Spring)项目中,然后突然...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。