请写出一个符合 W3C 规范的 HTML 文件,要求
- 页面标题为「我的页面」
- 页面中引入了一个外部 CSS 文件,文件路径为 /style.css
- 页面中引入了另一个外部 CSS 文件,路径为 /print.css,该文件仅在打印时生效
- 页面中引入了另一个外部 CSS 文件,路径为 /mobile.css,该文件仅在设备宽度小于 500 像素时生效
- 页面中引入了一个外部 JS 文件,路径为 /main.js
- 页面中引入了一个外部 JS 文件,路径为 /gbk.js,文件编码为 GBK
- 页面中有一个 SVG 标签,SVG 里面有一个直径为 100 像素的圆圈,颜色随意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<link rel="stylesheet" href=" /style.css">
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="mobile.css" media='(max-width:500px)'>
</head>
<body>
<svg>
<circle cx="100" cy="100" r="50" fill="red"/>
</svg>
<script src="/main.js"></script>
<script src="/gbk.js" charset="GBK"></script>
</body>
</html>
说明:
媒体类型
- all,所有设备
- print,打印
- screen,彩色的电脑屏幕
- speech,不知道什么来的。
按需‘加载’css
@media还可以用在link标签上。
<link rel="stylesheet" href="css/1.css" media='(max-width:500px)'>
当浏览器宽度低于500px时,1.css的样式才会有效果。但这不代表大于500px时,就没加载了1.css。使用了@media属性后,只会让你当条件符合了,才让对应的css文件有效果。而且用这种方式有一个好处,就是不用在css里写@media。
移动端是怎么做适配的?
1, meta viewport
在head中添加这个meta:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2 媒体查询
@media (max-width:1000px){
div{
background:blue;}
}
@media (min-width:1000px) and (max-width:1150px){
div{
background: yellow;}
}
@media only screen and (max-width:1150px){
div{
border:solid 1px;}
}
@media not print and (max-width:1150px){
div{
border-radius:50%;}
}
- and,就是‘和’的意思,前后两个条件都达到时
- only,唯一
- not,除了这个之外
上面4个@media,分别的效果是:
- 当浏览器宽度低于1000px时
- 当浏览器宽度大于1000px 和 小于1150px时
- 当在屏幕上显示 和 宽度小于1150px时
- 除了在打印上显示外 和 宽度小于1150px时
3 动态 rem 方案
rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位,即根据网页的根元素(html)来设置字体的大小。
手机端方案的特点
a. 所有手机显示的界面都是一样的,只是大小不同
b. 1 rem == html font-size == viewport width
使用 JS 动态调整 REM
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
REM 可以与其他单位同时存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
在 SCSS 里使用 PX2REM,实现 px 自动转换 rem
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 750; //750为设计稿的宽度
.child{
width: px(375);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
用过CSS3吗? 实现圆角矩形和阴影怎么做?
圆角矩形使用border-radiaus:百分数 || 具体像素值
说明:border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
阴影使用:box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
说明:h-shadow 和 v-shadow 为必选,后面的[blur][spread] [color][inset] 可以根据需要选择写
什么是闭包,闭包的用途是什么?
「函数」和「函数内部能访问到的变量」(也叫环境)的总和,就是一个闭包。
闭包的作用:
私有变量
柯里化