手机web网页的设计
Viewport(视口)
1.视口概念
描述：视口，就是视图窗口的简称，页面中视口大小实际上就是html元素的显示大小
说明：页面想要在移动端加载必须进行视口适配
如果不对页面进行调整，默认页面在移动端加载时，都认为页面视口宽度为980px
2.解决方案
使用<meta>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minium-scale=1.0,maximum-scale=1.0">
说明：
(1)只要做移动端适配，就对页面添加此标签，此标签能够使得页面不在按照980px进行加载
(2)必要内容：
width=device-width 设置页面视口大小和设备尺寸大小相同
user-scalable=no 设置用户不可对页面进行放大缩小设置
initial-scale=1.0 设置页面加载倍率为1倍
(3)可选内容：
minimum-scale=1.0 设置页面最小缩小倍率为1.0
maximum-scale=1.0 设置页面最大放大倍率为1.0
补充：
这个标签在页面中并不是所有的移动端设备都能生效，几乎所有的移动端设备都不生效，但是不设置一定不生效
rem单位
rem是css的一个尺寸单位类似于px 、em、%一样都是用来设置大小的
rem表示是html的字体大小的多少倍
语法：
1.css语法
html{ //设置html标签的css样式来设置字体
font-size:100px;
}
1rem = 1*100px(根元素设置大小)=100px
//可以使用css3新增媒体查询（@media）进行设置，达到适应效果
2.js语法 //使用这个方法可以实现自适应，减少代码
window.onload =function(){
//页面载入后，获取到页面宽度后设置html字体大小
document.documentElement.style.fontSize =(document.documentElement.clientWidth/750)*100+'px';
}
window.onresize =function(){
//设置页面改变后，进行页面刷新设置html字体大小
document.documentElement.style.fontSize =(document.documentElement.clientWidth/750)*100+'px';
}
在750px大小的设备下：1rem=750px/750px*100=100px;
在375px大小的设备下：1rem =375px/750px*100= 50px;
补充：之所以习惯使用750px来设置，是因为ps设计稿大多都是750px做标准，可以移动端使用，不需要再进行等比例缩小或放大，可以按照实际开发进行更改
less
描述：
1.因为css文件在加载的时候，不允许用户对css中的内容进行计算等操作必须直接写出具体值，才能进行显示。但有些情况下，我们需要在css中进行计算操作，以保证赋值结果的精确，于是提出了一种CSS 预处理语言，less是其中一种，文件扩展名为.less
2.less文件和css文件作用基本相同，只不过less中允许书写算式等内容
3.它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
说明：less文件会在计算加载完毕后，生成一个css文件。这个css文件内容是根据less加载的。
补充：less中书写样式的时候，无法提示，都需要手动书写完成。
这里使用kaoloa行操作运算，然后调用生成的css文件
table{ width:700/((1000/750)*100)rem; height:300/((1000/750)*100)rem; font-size:20/((1000/750)*100)rem; } tr:nth-child(1){ font-size:30/((1000/750)*100)rem; }
使用koala运算生成后的css文件：
table { width: 5.25rem; height: 2.25rem; font-size: 0.15rem; } tr:nth-child(1) { font-size:0.225rem; }
生成的后的css文件直接调用就好了
