视口分:
视觉视口: 眼在页面上看到的内容
布局视口:写html代码时的布局宽高
1、布局视口:
<style>
header{height: 50px ; background: pink; margin-bottom: 10px;}
aside{width: 30%; background: red; height: 300px; float: left;}
article{width: 68%; background: pink; height: 300px; float: left;}
</style>
<body>
<header></header>
<aside></aside>
<article></article>
</body>
上述代码,在浏览器中的显示:
如果把上述放在移动设备上预览会是什么样子呢?
页面整体被压缩
实际为容纳桌面浏览器设计的网站,默认的布局视口宽度远大于手机屏幕的宽度
2、视觉视口
虽然布局视口很大程度上帮助了桌面网站到手机的转移,但我们还是不能完全无视移动端设备的屏幕尺寸
视觉视口是用户设备所能看到的网站区域。
就是浏览器的宽高。只是在 PC 端,浏览器窗口可以随意改变大小,我们可以直观的看到。而在 Client 端,大部分手机、平板的浏览器是不支持改变浏览器宽高的,所以其视觉视口就是其屏幕大小。
用户可以通过缩放来操作视觉视口,同时不会影响布局视口,布局视口仍然保持原来的宽度
3、理想视口
默认情况下,一个手机或平板浏览器的布局宽度是在980px或1024px。虽然这能让桌面网站不被压扁,但是这并不理想,尤其对手机用户,因为在狭窄的屏幕上更适合一个狭窄的网站
那么,真正适合手机的视口是什么呢????
viewport理想视口
-
布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)
<span style="background-color:#333333"><span style="color:#b8bfc6"><meta name="viewport" content="width=device-width, initial-scale=1.0 "/>;</span></span>
<span style="background-color:#333333"><span style="color:#b8bfc6"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"></span></span>
4、自定义用户代码片
以上的代码,我们每次反复的书写,非常的繁琐,自定义用户代码片
点击设置——》用户代码片段
选择新建全局代码片段文件:
输入新建代码片的名字:
把默认生成的示例代码删掉,复制进新的代码,如下:
复制新的代码,保存:
<span style="background-color:#333333"><span style="color:#b8bfc6">{
<span style="color:#d26b6b">"html"</span>: {
<span style="color:#d26b6b">"prefix"</span>: <span style="color:#d26b6b">"html"</span>,
<span style="color:#d26b6b">"body"</span>: [
<span style="color:#d26b6b">"<!DOCTYPE html>"</span>,
<span style="color:#d26b6b">"<html>\n"</span>,
<span style="color:#d26b6b">"<head>"</span>,
<span style="color:#d26b6b">"\t<meta charset=\"UTF-8\">"</span>,
<span style="color:#d26b6b">"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">"</span>,
<span style="color:#d26b6b">"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"</span>,
<span style="color:#d26b6b">"\t<title>Document</title>"</span>,
<span style="color:#d26b6b">"\t<link rel=\"stylesheet\" href=\"$1\">"</span>,
<span style="color:#d26b6b">"\t<script src=\"$2\"></script>"</span>,
<span style="color:#d26b6b">"</head>\n"</span>,
<span style="color:#d26b6b">"<body>\n$3"</span>,
<span style="color:#d26b6b">"</body>\n"</span>,
<span style="color:#d26b6b">"</html>"</span>
],
<span style="color:#d26b6b">"description"</span>: <span style="color:#d26b6b">"The full sample code - html5."</span>
}
}</span></span>
输入html 按回车键:
5、删除代码片:
自定义代码片段的默认地址:
C:\Users\用户名\AppData\Roaming\Code\User\snippets,
找到同名的删掉就ok了
6、写不写理想视口的区别
不写的时候,注释掉:
<span style="background-color:#333333"><span style="color:#b8bfc6"><span style="color:#b7b3b3"><!DOCTYPE html></span>
<span style="color:#999977"><</span><span style="color:#7df46a">html</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">meta</span> <span style="color:#7575e4">charset</span>=<span style="color:#d26b6b">"UTF-8"</span><span style="color:#999977">></span>
<span style="color:#da924a"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> --></span>
<span style="color:#999977"><</span><span style="color:#7df46a">meta</span> <span style="color:#7575e4">http-equiv</span>=<span style="color:#d26b6b">"X-UA-Compatible"</span> <span style="color:#7575e4">content</span>=<span style="color:#d26b6b">"ie=edge"</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>Document<span style="color:#999977"></</span><span style="color:#7df46a">title</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">link</span> <span style="color:#7575e4">rel</span>=<span style="color:#d26b6b">"stylesheet"</span> <span style="color:#7575e4">href</span>=<span style="color:#d26b6b">""</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">script</span> <span style="color:#7575e4">src</span>=<span style="color:#d26b6b">""</span><span style="color:#999977">></</span><span style="color:#7df46a">script</span><span style="color:#999977">></span>
<span style="color:#999977"></</span><span style="color:#7df46a">head</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>
<span style="color:#999977"><</span><span style="color:#7df46a">h1</span><span style="color:#999977">></span>hahah <span style="color:#999977"></</span><span style="color:#7df46a">h1</span><span style="color:#999977">></span>
<span style="color:#999977"></</span><span style="color:#7df46a">body</span><span style="color:#999977">></span>
<span style="color:#999977"></</span><span style="color:#7df46a">html</span><span style="color:#999977">></span></span></span>
不写理想视口:
书写后,把注释给放出来: