手机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文件直接调用就好了