今天完成的事情：任务八九。

今日收获

自适应小屏幕设备时，该如何布局

1.不使用绝对宽度，使用相对单位 具体来讲CSS代码不能指定像素宽度为xx px;只能指定百分比宽度 width: xx%;或者width:auto; 字体只能使用相对大           小（em,rem,vw,vh,vmin,vmax)等。

2.在网页代码的头部，加入一行meta标签：meta name="viewport" content=content="width=device-width, initial-scale=1" 这段代码意思是说网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

  viewport是应对手机模式访问网站,网页对屏幕而做的一些设置。设置viewport后，移动页面就可以进行拖动，放大缩小。

input range样式美化

html代码

<input id="snrPollInterval" type="range" min="1" max="30">

css代码

 input[type="range"] {

   /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/

 -webkit-appearance: none; /*去除默认样式*/

 margin-top: 42px;

  background-color: #ebeff4;

  /*border-radius: 15px;*/

   width: 80% !important;

  -webkit-appearance: none;

   height:4px;

   padding: 0;

  border: none;

 /*input的长度为80%，margin-left的长度为10%*/

 }

 input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;/*去除默认样式*/

   cursor: default;

   top: 0;

   height: 20px;

   width: 20px;

   transform: translateY(0px);

   /*background: none repeat scroll 0 0 #5891f5;*/

   background: #fff;

   border-radius: 15px;

   border: 5px solid #006eb3;

  /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/

 }