viewport 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...一、viewport的概念 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但是viewport...但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。 ...在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。 ...ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域...但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。...在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...这样的写法看起来谁都会做，没吃过猪肉，谁还没见过猪跑啊~，确实，我们在开发移动设备上的网页时，不管你明不明白什么是viewport，可能你只需要这么一句代码就够了。
网页设计是一个棘手的话题。当你创建网站时你需要考虑很多事情。为了简化这个任务，我这里准备了一个列表，每个网页设计师在设计网页时都应该考虑这些注意事项。好消息是，这都是一些简单的设计原则。...应该做什么： 1.不管设备如何，都应该提供相同的用户体验 用户会使用不同的设备来访问你的网站：他们可通过台式电脑或笔记本电脑，平板电脑，手机，音乐播放器甚至手表上访问您的网站。...请记住，这不关乎于一个网站设计的有多好，但必须确保用户可通过自己的方式进行浏览。这就是为什么你的网站上的导航应该设计成这样。...包括动画效果，固定滚动点，甚至滚动条本身的重新设计。被劫持滚动是许多用户最烦人的事情之一，因为其不受用户控制。当你设计网站或用户界面时，你希望让用户通过网站或应用程序掌控其浏览速度和移动。 ?...6.为了美而忽视可用性 站点或用户界面的设计不应影响用户在屏幕上阅读内容的能力。重要的是要避免内容繁琐，色彩不均匀，其会妨碍网站的可读性或导致颜色对比度不足（例如下面的示例）。 ?
7、学会使用webkit-box 上一条，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式
图片 侧边栏的作用应该就不用多说了吧，能够很方便我们回到网页的指定位置，在大屏设备中，侧边栏往往是悬浮于屏幕右侧，很方便用户的使用，但在小屏设备中，屏幕空间有限，所以我们会通过隐藏侧边栏的方式，来节省视口空间的使用...我们先来看下，在大屏设备中，侧边栏如何显示，继而再讲述，从大屏设备切换到小屏设备，侧边栏如何隐藏，国际惯例，先看 HTML 结构代码 笔记本电脑，屏幕空间有限，我们通常选择将侧边栏进行隐藏，只有在浏览者需要用到侧边栏中的时候，再将侧边栏显示出来，在宽度小于等于 1410 px 的设备中，侧边栏将会在屏幕右侧进行隐藏，并会出现一个提示图片...，当鼠标移至图片上时，提示图片隐藏，侧边栏出现；当鼠标从侧边栏上移开时，侧边栏隐藏，提示图片出现 CSS 媒体查询代码如下 @media screen and (max-width: 1410px) {...，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
2、移动设备 移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，通过上面的例子我们可以知道只要viewport足够大，就能保证原本为...PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。...; document.documentElement.clientHeight; 通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢...移动设备厂商认为将网页完整显示给用户才最合理，而不该出现滚动条，所以就将layout viewport进行了缩放，使其恰好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport
7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊
今天，我们大多数人都或多或少的使用过这个技术。据统计，截至2019年，谷歌所有搜索访问中有61%是通过移动设备上完成的。...媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式，然后在其上构建更复杂的桌面版网页样式。...下面是移动优先样式的常见用例示例，其中对于较小的设备，列的宽度为100%，但在较大的视口中，列的宽度为50%。...在响应性网页设计方面，Flexbox是这些新的重要CSS功能之一。 什么是Flexbox？ 首先，让我先告诉你“ Flexbox能做什么”。 使用CSS垂直居中的最简单方法是什么？...适用于桌面设备的样式，我们利用与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap，这样可以确保子元素不会换行，通过在媒体查询中设置div为flex-basis: 33%
引言 众所周知，在当今移动互联网大行其道的现在，基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西，但是大家有没有想过这样的网页是怎样改制作出来的呢？...这里，细心的读者可能会问既然效果都是一样的，那么为什么要多此一举呢， 这样做当然有这样做的必要，详见这篇文章，在此就不必啰嗦了 其中一般这个Logo图标不但可以运用在标题中，而且还可以放在收藏夹中去使用...window.scrollX 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？...::-webkit-scrollbar{ opacity: 0; } 除此之外，还有像HTML5 中的API和重力感应事件等等的新特性的加入，使得HTML5网页的开发变得越发的多功能性，但是这些在今天的布局上局不讲了
这种设计可以吸引您的时间，而不是浏览文本。 虽然这种设计可以在较小的屏幕（尤其是智能手机和平板电脑，在我的测试中）上提供良好的阅读体验，但我发现在较大的屏幕上很难。...我在阅读时有一定程度的注意力不足，当我尝试滚动阅读时，此设置消除了很多视觉环境；我通常会尝试通过选择我正在阅读的所有其他段落来解决注意力不足的问题，但是当设计一次只显示一个或两个段落时，这没有帮助。...这就是为什么我的假设是，对于真正的大文本（如 Resilient Web Design 250%在更大屏幕上的正文），读者将需要使用更多的注视力来阅读同一文本，并且可能会失去阅读速度并更快地感到疲劳。...我喜欢从100%的小屏幕开始，然后在大屏手机或平板电脑上使用(比如 110% 或 115%)，在笔记本电脑和大屏幕上使用可能达到 125%。...然后，根据我使用的字体、我想要的外观以及我在各种设备上测试的结果，我调整这些值。 对于我们一直在追逐设备制造商，操作系统和浏览器开发人员，并试图每两年调整字体大小以适应市场上的情况，我也感到难过。
我本以为可以从互联网上访问我的笔记本电脑，但是事实并非如此，那么，为什么我分配了公共 IP 地址却无法访问我的笔记本电脑？ 什么是地址块 100.64.0.0/10？...在 RFC 6598 中，它记录如下： 本文档要求分配一个 IPv4 /10 地址块用作共享地址空间，以满足运营商级 NAT (CGN) 设备的需求。...基于此可以推断，ISP实际上是使用类似路由器的设备将我们的网络组织成一个局域网，然后通过URL转换NAT技术实现网络通信。...可以理解为我们以前通过PPPoE获取公网IP地址，该IP地址是互联网上任何设备都可以访问的无障碍地址。...但是现在通过拨号获得的只是一个内网地址，也就是说我们自己的路由器或者电脑拨号连接到电信运营商的“大路由器”上，已经没有公网IP地址了。 为什么我们使用 100.64.0.0/10？
如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。 ? 网页设计的单色时代，约1989年。...这也是Froont飞出页面和开场动画等的黄金时代。但是，Flash会占用计算机大量的处理资源，这也使得它成为一种特别不友好的技术，尤其是对于移动设备例如笔记本电脑和智能手机而言。 ?...一开始设计人员想到的是使用一种网格系统，这种网格系统可以根据设备屏幕的尺寸将网页分割成若干列。 ?...2010年，对于如何在移动设备显示网页的问题，Ethan Marcotte想到了另一种解决方案：响应式设计。 ? 在响应性设计之后，一种撇去华丽效果重视内容的扁平化设计也出来了。...以后，设计人员将不需要再担心浏览器的兼容性问题，各种适用于任何设备的工具也都随手可得。以后的技术将不会再成为设计的限制，设计师可以集中精力解决UI和UX问题，而不是把时间浪费在排除故障上。
网页设计师们经常会浏览高质量的网页设计作品分享网站，来解决灵感枯竭的问题。因为在这些优秀的网站设计实例中可以看到某些趋势，诸如：扁平化设计、视差滚动、响应式设计、流行配色设计等等。...全网站设计使用了全新的分屏设计，这种网站设计可以很好地为用户呈现两方面的信息，并且能够针对不同尺寸的屏幕进行匹配，使网页端和移动端做到很好的兼容，以便为用户创造好的用户体验。...网站设计使用漂亮的美食大图背景吸引用户，全屏式的展示堪称完美。此外，采用汉堡包菜单按钮，设计抽屉式导航栏，可以大大节约网站空间。随着页面滚动，导航栏会自然的移动到页面顶部固定。...用户在浏览网站时能够更加关注网站内容而非LOGO，这样就可以为用户传递更多的信息。 08.Doggoforhire ? ? 网站巧妙地使用了视差滚动特效。...网站设计采用了非常给力的响应式设计，在PC端可以查看“Get Proposal”号召性用语按钮的完整菜单，但在平板和移动设备上非常精简。
他已经知道咖啡馆里每个人的出生地、来自哪所学校以及他们在搜索引擎上最近浏览的内容…… 我是偶然在阿姆斯特丹市中心的一家咖啡馆与Wouter认识的。...很快我就明白了，此时咖啡馆里的所有正在上网的设备都已连接到了Wouter的设备上，包括笔记本电脑、智能手机、平板电脑等。...后来我才明白，Wouter使用的黑色装置上的天线可以拦截所有发送到周围笔记本、智能手机和平板电脑上的信号。接下来，更多的文本开始在屏幕上滚动，我甚至可以看到先前连接到公共WiFi的设备。...一会之后就有很多的设备连接到了我们的虚假接入点，我们可以清楚的看到他们Mac设备地址、登录历史、设备主人姓名等信息。在我的要求下，他准备进行更进一步的行动。...在Wouter的设备上我们可以看到有人在用Mac浏览Nu.nl.网站；有人在用WeTransfer发送文件；有人在登录Dropbox；有人在登录FourSquare等等。
一、键盘 键盘大家都不陌生，我就不多介绍了，就是用来输入数据的，是最常用的输入设备，当然鼠标也是。我主要是介绍键盘不常用的按键和一些比较有用的功能。...； F12:在Word中可以快速打开另存为窗口。...特殊功能键的作用： Print Screen键：全屏截图键，alt+Ps为窗口截图； Scroll Lock键：在Excel中作为滚动键； Pause Break键：暂停或中断；...它就长成这个样子了，我在这里说一下它的功能，左右按键和滚轮不讲了，红色的DPI默认可以调节鼠标灵敏度；左侧面的两个红色的按键控制游戏角色移动的；这里给大家说一下，鼠标滚轮现在基本上都是设有按键的，在观看文档或者网页的时候...，你可以点击滚轮，上下移动非常的快。
好的移动端应用，应该是允许用户在不同的设备媒体之间自由切换，流畅地继续他们的体验。 例如，据Appticles数据显示，37%的用户在手机上搜索并研究相关信息，但却会切换到桌面端设备进行购买。...因此，如果你正在设计一款电子商务类应用，就需要提供响应式设计，方便移动用户能够轻松的切换到他们的台式机或笔记本电脑继续体验。 更何况，用户体验设计的最终目标，是实现在所有设备上的“无缝体验”。...事实上，这两种应用类型的区别非常明显：顾名思义，原生应用是专为移动平台（即使用Android/iOS系统的移动设备）设计的移动端软件。而混合应用则是用户能够在浏览器中运行，且基于网页的应用程序。...准确的说，在移动端方面，移动用户就是十足的“滚动者”。页面滚动成为继页面点击之后，又一最受欢迎的交互方式。 在加载一个移动页面时，人们总是忍不住立即开始滚动。...这种假设移动用户因为在移动设备中使用应用，就对软件功能需求更少的认识是完全错误的。产品功能的多少应该取决于产品本身的特性。
在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。...在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...在为桌面浏览器设计的网页中，我 们无需对这个津津计较，但在移动设备上，必须弄明白这点。
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。...之后我大胆推测了一下： 会不会是因为在移动端click事件的触发条件就是必须touchstart和touchend同时触发才能触发click呢？...抱着试一试的心态，果然好了，click能顺利触发，QQ和微信中也没有问题，我以为这样就好了，但是为什么页面不能滚动了？...所以页面无法滚动了，之后又去找找找，找了很久一直没找到怎么解决这个问题，突然想起之后用的一个移动端的图片轮播插件， 为什么他们可以左右滑动，不影响click事件和a标签，也不影响页面的滚动。...x轴和y轴的移动值，判断当前是往哪个方向滑动，如果是在x轴上滑动（左右），就调用event.preventDefault()方法，如果是在y轴上滑动（上下），就不调用event.preventDefault
用户可以通过平移和缩放来看网页的不同部分。...简单点来讲：移动设备上的viewport就是屏幕上能用来显示我们的网页的那一块区域。 viewport不局限于浏览器可视区域的大小，一般来讲要比浏览器的可视区域要大。...一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的...可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样,回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，...因为在没有指定缩放值的情况下，移动设备会自动计算initial-scale的值保证 layout viewport 也就是页面宽度自动适配浏览器的可视宽度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
