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