viewport | 易学教程

Bootstrap学习——概论

阅读更多关于 Bootstrap学习——概论

HTML5文档类型 Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 <!DOCTYPE html> <html lang="zh-cn"> ... </html> 移动设备优先在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说， Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 在移动设备浏览器上，通过为viewport meta标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ <meta name="viewport"

如何处理跨平台的自适应三

阅读更多关于如何处理跨平台的自适应三

相信大家在面试的过程中总会被问到如何处理自适应这样的相关问题，自适应其实就是根据视口的大小或者说用户平台的不同呈现出不同或相同的样式，有这么几种方案：使用flexbox弹性布局的方法固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用 rem ---------------------------分------------割------------------------------------- 淘宝rem的例子看看淘宝在不同分辨率下，呈现的效果：淘宝的效果跟网易的效果其实是类似的，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前，先来了解一点关于viewport的知识，通常我们采用如下代码设置viewport: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容）：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4：这是6： via 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从代码也可以证实这一点：原文来自：http:/

移动端适配js

阅读更多关于移动端适配js

第一种、参考网易的（我现在用这个多） https://www.cnblogs.com/well-nice/p/5509589.html 1 var deviceWidth = document.documentElement.clientWidth; 2 if(deviceWidth > 750) { deviceWidth = 750; } 3 document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; 备注：body要加个样式：width:7.5rem 这是针对设计图为750的，如果是640，就/640 （1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度： 1 如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem 2 如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem （2）布局时，设计图标注的尺寸除以100得到css中的尺寸，比如下图：播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！（3）在dom ready以后，通过以下代码设置html的font-size: 1

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

最近翻了一下关于移动端的rem的使用，怎样最方便。在读到流云诸葛的一篇关于《从网易与淘宝的font-size思考前端设计稿与工作流》的文章后，来总结一下。然而根据我以往做移动端web项目的时候，设计稿一般是640或者750的，我一般会在head里面这样写： <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"> 做移动端活动的时候结构也一般这样： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable">  <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title

Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

阅读更多关于 Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

问题 I am displaying different content depending on how the user is holding his/her phone using the onorientationchange call in the body tag. This works great - I hide one div while making the other visible. The div in portrait mode looks great on first load. I use this to get the right scale/zoom: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Even if the content in portrait mode run over, the width is correct and the user can scroll down. The display

Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

阅读更多关于 Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

SVG for print with scale

阅读更多关于 SVG for print with scale

问题 I have an SVG file representing a flat in my browser and I need to print the output in a specific scale. I'm using SVG.js to manipulate the SVG content but I can't find a combination of correct viewport viewbox setup to meet my needs. What I know is the SVG source file size. Via the x and y coordinates I calculated a distance to find the correct "screen scale" to match 1cm on the plan with a pixel number. For printing I need to respect "specific scales" for example 1/50. So I tried to get the

学习Bootstrap

阅读更多关于学习Bootstrap

一.Bootstrap的学习 1.Bootstrap的下载　　使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。然后将下载，然后引入到自己建好的当前目录中　　点到起步中的基本模板　　　　将看到的整段代码复制粘贴到建好的index.html文件中 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media

Bootstrap的使用。。。

阅读更多关于 Bootstrap的使用。。。

概览深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 移动设备优先在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说， Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 <meta name="viewport" content="width=device-width, initial-scale=1">在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕

订阅 viewport