移动端视口

最新推荐文章于 2024-03-10 08:25:32 发布

毕竟是杨哥

最新推荐文章于 2024-03-10 08:25:32 发布

阅读量140

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/y1815151/article/details/120956715

版权

视口分:

视觉视口：眼在页面上看到的内容

布局视口：写html代码时的布局宽高

1、布局视口：

上述代码,在浏览器中的显示：

如果把上述放在移动设备上预览会是什么样子呢？

页面整体被压缩

实际为容纳桌面浏览器设计的网站，默认的布局视口宽度远大于手机屏幕的宽度

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>

不写理想视口：

书写后，把注释给放出来：

毕竟是杨哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端视口

视口分:视觉视口：眼在页面上看到的内容布局视口：写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: 30...
复制链接

扫一扫