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

 

手机web网页的设计的更多相关文章

  1. UC 浏览器远程调试手机web网页记录

    浏览器远程调试插件有很多,本来要使用chrome浏览器的调试插件的,但是需要FQ才能使用(公司网络有限制,果断放弃),最终选择使用UC浏览器的. 其实UC官网插件使用已经介绍的很详细了,但是有几处坑需 ...

  2. 【转】手机web——自适应网页设计(html/css控制)

    手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...

  3. 手机web——自适应网页设计(html/css控制) - 51CTO.COM

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. 手机访问web网页,使得显示自适应

    //禁止浏览器伸缩<meta name="viewport" content="user-scalable=0">//手机访问web网页,使得显示自 ...

  5. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  6. html5手机Web单页应用实践--起点移动阅读

    一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...

  7. HTML5+JS手机web开发之jQuery Mobile初涉

    一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...

  8. C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1   BIMFAC ...

  9. .NET桌面程序集成Web网页开发的多种解决方案

    系列目录     [已更新最新开发文章,点击查看详细] B/S架构的Web程序几乎占据了应用软件的绝大多数市场,但是C/S架构的WinForm.WPF客户端程序依然具有很实用的价值,如设计类软件 Au ...

随机推荐

  1. Linux对外提供服务 网络操作 端口操作 1.开启服务监听端口 2.设置防火墙,放行访问端口的包 iptables&netfilter 四表五链和通堵策略

    主题: Linux服务器上软件提供服务 1.网络操作 2.端口操作 1.网络操作 本机必须能够ping通目标主机(本地虚拟机或者远程主机) 2.端口操作 1.开启服务监听端口 2.设置防火墙,放行访问 ...

  2. C# 字符串string

    一.引言 在 C# 中,字符串是System.String类的一个引用类型.但与其他引用类型不同的是,C#将字符串视为一个基本类型,它可以申请为一个常量,也可以直接给它赋值. string关键字是Sy ...

  3. String常用方法简介

    1. 创建String对象的常用方法 (1) String s1 = "mpptest" (2)  String s2 = new String(); (3) String s3 ...

  4. python进阶11 正则表达式

    python进阶11 正则表达式 一.概念 #正则表达式主要解决什么问题? #1.判断一个字符串是否匹配给定的格式,判断用户提交的又想的格式是否正确 #2.从一个字符串中按指定格式提取信息,抓取页面中 ...

  5. Luogu P1155 双栈排序 图论?模拟吧。。

    今天想做做图论,于是点开了这道题....(是二分图染色然而我没看出来) 四种操作及条件: 1. s1.push() 需满足 待push的元素小于栈顶 && { 若在原序列中,待push ...

  6. Django - CRM项目(3)

    一.CRM项目的业务逻辑与表结构梳理 1.分析业务逻辑 (1) 引流(sem) (2) 网络咨询师(客服):添加客户信息和查看客户,分配销售 (3) 销售:查看私户 添加跟进记录 失败:加入公户 成功 ...

  7. java颜色代码对照表

    LightPink 浅粉色 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 #DC143C 220,20,60 LavenderB ...

  8. NIO基础之Buffer

    java.io 核心概念是流,即面向流的编程,在java中一个流只能是输入流或者输出流,不能同时具有两个概念. java.nio核心是 selector.Channel.Buffer ,是面向缓冲区( ...

  9. Kendo 单页面应用(一)概述

    Kendo 单页面应用(一)概述 Kendo 单页面应用(Single-Page Application,缩写为 SPA)定义了一组类用于简化 Web 应用(Rich Client)开发,最常见的单页 ...

  10. C语言中的static和extern

    c语言中,全局变量是一个非常重要的概念.全局变量定义在函数外,可以被所有的函数共同使用. #include <iostream> ; void display() { printf(&qu ...