学习CSS3的一点笔记

最近准备给孩子做一个用手机做题的网站，所以研究了一下CSS3。好久没有玩这个了，一看CSS3的资料，感觉乱起八糟的。

首先，我看CSS3是为了做响应式布局，孩子可以用手机看，也可以用IPAD或者电脑上看。

感觉用media quaries最为方便

 

一、直接给不同的屏幕设置不同的样式表，这样不容易出错

给小屏幕用：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="tinyScreen.css" />

给中屏幕用：

<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 1024px)" href="smallScreen.css" />

给大屏幕用：

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px) "  href="bigScreen.css" />

苹果手机大概是320*460；ipad是1024*768;现在的电脑屏幕一般在1024以上.

 

二、图片的自适应

让图片自动全屏显示即可

img { max-width: 100%;}

 

三、不同浏览器问题

由于不同浏览器有私家代码，所以还要分浏览器

-ms代表【ie】内核识别码

-moz代表火狐【firefox】内核识别码

-webkit代表谷歌【chrome】/苹果【safari】内核识别码

-o代表欧朋【opera】内核识别码

什么都没有表示W3c标准。