HTML之meta&&响应式布局 - 大数据分析_大数据处理_大数据技术_云计算 -
当前位置:首页 > 新闻资讯 > 正文

HTML之meta&&响应式布局2018-02-11 16:46:11 | 编辑:gxm | 查看: | 评论:0

name属性用于描述网页,它是以名称 值形式的名称,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类 其中最重要的是description,keywords

meta

在head标签中的meta标签,可以为HTML文档提供额外信息

meta属性主要分为两组

1.name属性与content属性

name属性用于描述网页,它是以名称/值形式的名称,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords

2.http-equiv属性与content属性

http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-type charset 提供编码信息,refresh刷新与跳转页面,no-cache 页面缓存,expires网页缓存过期时间.

定义网页关键词

 

多个关键词应该使用空格分开;

最好保持在10个以下,过多的关键词,搜索引擎将忽略;

定义网页简短描述

 

应该保持在140-200个字符或者100个左右的汉字;

响应式布局

像素和分辨率

一张图片640*480:长640像素,宽480像素。单位面积上像素点越多(即像素点越小),这图片就越清晰细腻。但是每一个像素多少毫米取决于显示器的分辨率。A显示器640*480,B显示器1200*480,AB显示器长宽相同。那么图片在A显示器上刚好铺满,每个像素点很大,图片很粗糙,在B显示器上不能铺满,每个像素点比较小,图片比较清晰。

viewport

移动设备上的viewport就是浏览器上用来显示网页的那部分区域。

一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这样那些为桌面设计的网站也能在移动浏览器上正常显示,带来的后果就是浏览器会出现横向滚动条。移动设备默认的viewport是layout viewport。

layout viewport 的宽度是大于浏览器可视区域的宽度的,layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取;(通常是980px)

visual viewport的宽度是浏览器可视区域的大小, visual viewport的宽度可以通过window.innerWidth 来获取;

1

meta标签的作用是让layout viewport的宽度等于设备的宽度也就是visual viewport的宽度,同时不允许用户手动缩放。没有设置meta,css的320px在手机屏幕中大约只有1/3宽。设置了meta,css的320px在手机屏幕中差不多铺满屏幕。

参考资料:http://www.cnblogs.com/2050/p/3877280.html

上一篇:人工智能会取代服装厂工人吗? AI时代:推荐引擎正在塑造人类下一篇:

公众平台

搜索"raincent"或扫描下面的二维码