2018 年 12 月 17 日，Tumblr(汤博乐)网站宣布即日起全面禁止色情内容。当这项新的政策实施了两周后，就立马暴露出了问题。...在 Tumblr 的人工智能系统成功部署后，它对一些中立的内容进行了错误标记，导致该网站的 4.554 亿个博客和 1662 亿个帖子无辜躺枪。...目前该公司并未对此有任何回应，也不清楚Tumblr使用的是何种内容过滤技术，或者是否创建了自己的内容过滤系统，但显然，社交网站在政策和技术方面都陷入了困境。...在这里，他指的是寻找客户的性工作者，但很容易就被误认为是合法问题。“这不是色情片，但它是你不想放在平台上的东西，对吗？”...Clarifai已经拥有适用于 iOS 和 Android 的软件开发套件，Zeiler 表示正在努力让产品在物联网设备（如安全摄像头）上运行，但实际上，那意味着每个设备上都需要有优化的 AI 芯片或足够的终端计算资源
A：不管您的用户使用何种终端访问您的网站，都能够自动识别适应终端设备的分辨率以及宽度，让您的网站在众多设备中无缝浏览；响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本 响应式布局的优缺点...在移动设备上设置原始大小显示和是否缩放的声，是在页面的头部\之间加上下面这样的语句∶ /** 设置默认的宽度为设备的宽度 **/ 通过viewport把自己冒充成更宽的屏幕。 4) 响应式网站的内容设计 在开发响应式布局网站，除了页面布局还有网站中的内容也是比较重要的，比如网站显示的图片和文字。...响应式设计秉承：“内容优先，移动优先”的设计原则。 其中最重要是网站中的文字大小，常常采用的单位标准 pixel（像素)，em，rem，百分比等等。 A：我们如何进行选择自适应网站的字体标准？...5) 响应式网站的设计流程 当产品经理提出产品功能移动化的需求时，通常的网站设计流程如下： 第一步：确定需要兼容的设备类型、屏幕尺寸。 第二步：制作线框原型。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，...ppk认为，移动设备上有三个viewport。 首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。...但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉...也许有人会问，现在不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？...第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
下图是我们需要适配的移动端屏幕设备尺寸，看到这些数据，是不是有一种键盘敲烂的感觉。 1.1 移动端设备 移动端设备主要包括 Android、iOS 等手机设备。...单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...响应式开发主要是为了解决移动互联网浏览的问题。 响应式页面优点 可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题。 便于搜索引擎收录。...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。 理想视口 理想视口是指对设备来讲最理想的视口尺寸。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。
的大小不局限于可视区域，默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站...ppk认为，移动设备上有三个viewport。 首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。...但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉...也许有人会问，现在不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？ ...，也就是宽度为100%的效果。
1.2 三种视口 移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。...布局视口（layout viewport） 一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题...理想视口（ideal viewport） 布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。...，对 PC 端浏览器是无效的 当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度 单独设置 initial-scale 或 width 都会有兼容性问题...= 2 or 3 对于一张 100px * 100px 的图片，通过 CSS 设置其宽高 { width:100px; height:100px; } 在普通显示屏的电脑中打开是正常的
6、Tumblr Tumblr是全球大的微博客平台和社交网站之一。Tumblr拥有者和经营者为Tumblr, Inc。Tumblr允许用户发布多媒体和短形式的博客内容。...该程序显着特点是它限制正方形的形状照片，并采用类似柯达傻瓜相机和宝丽来影像，而相比之下，16:9宽高是现在通常使用的移动设备相机比率模式。用户还能够记录和分享历时长达15秒短片。...该程序服务迅速得到普及，到2012年4月网站拥有1亿活跃用户。Instagram应用程序可以通过苹果App Store、谷歌游戏和Windows Phone商店下载到。...从2005年到2008年初，MySpace是世界上浏览量大的社交网站，并在2006年6月超越谷歌成为了美国访问量大的网站。在2008年4月，MySpace被Facebook超越。...截止2013年，它拥有8000万注册用户，每天拥有张贴300万问题。现在，它是世界上200个访问量大的网站之一。Ask.fm经历了快速增长。截止2012年4月，它拥有500万注册用户。
####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334 我们开发时候的1px 不是一定等于1个物理像素的 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比 如果把1张100*100...通过判断设备，如果是移动设备打开，则跳到移动端页面。 也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站 京东pc端： ? 京东移动端： ?...响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配 4.2 移动端技术解决方案 1.移动端浏览器兼容问题 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题
下图是我们需要适配的移动端屏幕设备尺寸，看到这些数据，是不是有一种键盘敲烂的感觉。...单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...响应式开发主要是为了解决移动互联网浏览的问题。 响应式页面优点 可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题。 便于搜索引擎收录。...视觉视口 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。...app的公司还是挺多的，如：亚马逊，携程，兰亭 流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响...02 固定宽度做法 还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局...通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。...100vh = 视口的高度 总结：关于移动端的适配方法，就总结到这里，欢迎大家参与讨论
####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334 我们开发时候的1px 不是一定等于1个物理像素的 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比 如果把1张100*100...通过判断设备，如果是移动设备打开，则跳到移动端页面。...通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。
并会介绍移动优先的响应式设计。 概述 响应式设计指的是网站可以在不论是宽屏显示器还是移动设备都能表现得同样出色。这是一种网页设计和开发方法，它消除了网站的移动版本与桌面版本之间的区别。...响应式设计是通过媒体查询完成的。 流式布局 流式布局是一种拉伸和缩小以填充屏幕宽度的布局，如之前我们介绍过的 Flexbox 布局一样。 弹性媒体 不同的设备有不同的图像要求。...否则，100vw 默认值告诉浏览器图像的宽度将是”视口宽度”的 100％。...所谓移动优先，即优先考虑移动设备的样式，在非移动设备中进行响应式适配，这样做的好处是既可以在移动端有更好的表现，又能够在其他设备看到适配后的页面。...当然很多 Web 开发并不是移动优先的设计，做响应式网页的时候如果先开发的 PC 端，再进行移动适配，这就是 “PC 优先”。
今天，我们大多数人都或多或少的使用过这个技术。据统计，截至2019年，谷歌所有搜索访问中有61%是通过移动设备上完成的。...用于标识移动网站的Viewport Meta标签 viewport meta标签为浏览器如何调整页面以适应每个设备的宽度做出了依据。...下面是移动优先样式的常见用例示例，其中对于较小的设备，列的宽度为100%，但在较大的视口中，列的宽度为50%。...column”元素的宽度设置为100%； 通过使用min-width媒体查询，我们专门为最小宽度为600px（暨宽度大于600px）的viewport定义了规则。...模拟和监视响应式网站的工具 Chrome DevTools移动仿真 Chrome的DevTools提供了一系列平板电脑和移动设备的移动仿真。
根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...# 理想视口(ideal viewport) 布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。...显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。 理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。...端浏览器无效 缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度 单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
平板设备如 ipad 以及传闻基于 webOs 的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。...如果移动浏览器和桌面浏览器的工作原理相同，侧边栏至多显示 40px 宽，确实太窄了。你的自适应布局看上去被压扁了。 解决这个问题的方法之一就是为移动浏览器设计特殊的网站。...也许是，有线索表示浏览器厂商认为这一数值对于设备上的网站是友好的宽度。但仍然有些含糊不清 width 的媒体查询没有提供更多的其他信息。 因此我仍然不确定。...它们会被拉伸到布局视图的 100% 宽度。大多数浏览器会通过缩小来在屏幕上显示整个布局视图，如下图的效果 ? 所有的用户会立即放大查看，但是大多数浏览器会保持元素的宽度不变，这使得文本很难阅读。 ?... 元素收缩了，其他元素的宽度是 320px 的 100%。当用户放大的时候会看出来，而不是最初用户可能面对包含空白的缩小的页面。 ?
当用户放大的越大，一个CSS像素覆盖的设备像素就越多，因此这个元素不一定会跨越css设置等值的设备像素。在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。...2、视觉视口 虽然独立的布局视口很大程度上帮助了桌面网站过渡到手机上。但我们不能完全忽视移动设备上的屏幕尺寸。所以该说明一下视觉视口了。 视觉视口是用户正在看到的网站的区域。...它和设备的屏幕一样宽，并且它的CSS像素的数量会随着用户缩放而改变。 3、理想视口 布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。...介绍了三种视口 布局视口：不再与移动端浏览器相关联，完全是独立的。实际上布局视口的宽度要比屏幕宽出很多。 视觉视口：用户看到的网站展示区域，一般视觉视口和设备宽度一致。...并且它的CSS像素的数量会随着用户缩放而改变。 理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视口标签通知浏览器操作。使用它配合css媒体查询制定移动端展示方案。
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的...很显然viewport的宽度并不等于设备屏幕的宽度，滚动条和缩放页面也不是我们想要的效果。那么怎么办呢？改轮到meta标签收拾残局了。...meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。...，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。...可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样,回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，
可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。...响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 响应式布局的实现 1....优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。...这里有一个很严重的缺点 由于PC端和移动终端访问的是同一个网站，PC端可以不计较流量限制，但是移动端不可能不计较。...height:auto; } 将图片的最大宽度设置为100%，以确保图像不会超出其父级元素的宽度，如果父级元素的宽度发生改变，图片的宽度也随之改变，height：auto 可以确保图片的宽度发生改变时
通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。...如果一开始就设计一个包含全部交互的网站，然后再根据移动设备的限制来制约网站的功能，那么一般会以失败告终。 而移动优先的方式则会让你设计网站的时候就一直想着这些限制。...首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...# 给大视口添加样式 https://codepen.io/cellinlab/pen/bGaxYNb # 处理表格 在移动设备的流式布局里，表格的问题特别多。如果表格的列太多，很容易超过屏幕宽度。...在移动设备上实现表格的响应式布局 table { width: 100%; } @media (max-width: 30em) { /* 让表格所有的元素都显示为块级 */ table,
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
