今天完成的事件
div {
width:30% ;
padding-bottom:30% ;
/* border-radius 意思是给图形加圆角 */
/* border-radius:20% */
background-color:rgb(221, 159, 43);
float:left;
margin:1%
}
<link href="border.css" rel="stylesheet">
</head>
<body>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</body>
</html>
今天遇到问题和坑乎的一位师兄一样把width和height 参数加%格子就消失了看了一位师兄说把 高换成padding-bottom 就可以自由拉大拉小了，padding是 填充的意思有点不是很明白怎么就成了。相当于用内边框撑起了一个框架。文本内容撑起来的框架好像不能跟着网页变大变小。
什么是viewport？
Viewports：视口，视觉窗口，显示区域。
定义了 viewport meta标签创建一个虚拟窗口（viewports）让虚拟窗口分辨率接近桌面显示器这样用户可以平移和缩放来看网页的不同部分。就是为了让手机用户浏览器网页可阅读性更高更方便。浏览器引进viewport和meat tag来控制大小和缩放。
Viewport meta 标签如下
Width:控制viewport的大小
Height:控制viewport高度
Initial-scale:初始缩放比例，也即是当页面第一次load的时候缩放比例
Minimum-scale 允许用户最小缩放值，为一个数字可以代小数点
Maximum-scale 允许用户最大缩放值，为一个数字可带小数点
User – scalable 是否运行用户进行缩放，值为No或者是yes。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href=" body.css">
<style >
body{font-size:30px;color:rebeccapurple;}
img{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div>什么是viewport？ Viewports：视口，视觉窗口，显示区域。定义了
viewport meta标签创建一个虚拟窗口（viewports）让虚拟窗口分辨率接近桌面显示器这样用户可以平移和缩放来看网页的不同部分。
就是为了让手机用户浏览器网页可阅读性更高更方便。浏览器引进viewport和meat tag来控制大小和缩放。 Viewport meta 标签如下
meta name=”viewport”content=”width=device-width,initial-scale=1.0” Width:控制viewport的大小 Height:控制viewport高度
Initial-scale:初始缩放比例，也即是当页面第一次load的时候缩放比例</div>
</body>
</html>
明天接着把nginx配置完手机链接看下。
返回列表
评论