2018-01-03
2018-02-22 本文已影响0人
zjh111
<!DOCTYPE html>
<html>
<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='/print.css' media="(max-width: 500px)">
</head>
<body>
<svg viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50"/>
</svg>
<script type="text/javascript" src='/main.js'></script>
<script type="text/javascript" src='/gbk.js' charset="GBK"></script>
</body>
</html>
1.meta viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
宽度为设备宽度，禁止缩放，初始比例为1，最大最小比例为1
2.媒体查询
在link中使用时
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" >
小于800px时，example.css才会生效。
在样式表中使用时
<style>
@media (max-width: 800px) {
body{
background-color:red;
}
}
</style>
在宽度小于800px时body背景变红。
3.动态 rem 方案
rem是（font size of the root element），就是根据网页的根元素字体大小来设置宽高，字体大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.rect-circle{
width:100px;
height:100px;
border:1px solid black;
border-radius:25px;
}
.shadow{
box-shadow:5px 5px 5px black;
//水平 垂直 模糊 颜色
}
</style>
</head>
<body>
<div class='rect-circle shadow'>
</div>
</body>
</html>
函数 和 函数内部能访问到的变量的总和，就是一个闭包。
function x(){
var m = 1;
function y(){
m++;
return m
}
return y
}
var fn = x();
fn()
外部访问不到m只能通过函数fn()进行访问
作用
1从函数外部访问函数内部的变量
2将需要引用变量保存在内存中不被回收
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
