视口 | 易学教程

移动端根据设备大小设置字体大小（居于案例的理解扩展）

阅读更多关于移动端根据设备大小设置字体大小（居于案例的理解扩展）

1、问题描述：拿到公司里以前写好的网页查看，发现它的CSS中有这样一些东西： /*设备竖屏时的样式*/ @media all and (orientation : portrait){ .video_bg{ position:fixed; z-index: -9999; width: 100%; background: #469BD4; } } /*设备横屏时的样式*/ @media all and (orientation : landscape){ .video_bg{background: #A900B1; position: fixed; right: 0; bottom:0; z-index: -9999; width: 100%; height: 100%; } } @media only screen and (min-width:320px) and (orientation:portrait){ html{font-size:100%;} } @media only screen and (min-width:360px) and (orientation:portrait){ html{font-size:125%;} } @media only screen and (min-width:400px) and (orientation:portrait){

html5中SVG坐标

阅读更多关于 html5中SVG坐标

文章内容均来自 http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Coordinates SVG的世界是一个无限的画布。在本章中，我们将讨论如何你告诉一个浏览器程序，你有兴趣，它的尺寸是什么，以及如何定位点区域内，这个画布视口（ viewport ）您的文件拟使用面积的画布被称为视口。建立这个视口的大小，宽度和高度属性上 <svg> 元素。这些属性值可以是简单的一个数字，它被假定为以像素为单位，这被说成是在用户坐标指定。你也可以指定宽度和高度作为一个数字后面的单元标识符，它可以是下列之一： em 默认字体的字体大小，通常相当于一个字符的长度 ex 字母的x的高度 px 像素 pt Points (1/72 of an inch) 1/72英寸 pc Picas (1/6 of an inch) 1/6英寸 cm Centimeters mm Millimeters in Inches <svg width="200" height="150">,<svg width="200px" height="200px"> 这两个指定区域200像素宽，150像素高 <svg width="2cm" height="3cm"> 指定区域2厘米宽，3厘米高 <svg width="2cm" height=

前端适配

阅读更多关于前端适配

移动端开发中，关于适配问题的一点总结(一) 转自：http://www.jianshu.com/p/3a5063028706?nomobile=yes 我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。下面这段代码，做过移动端项目的同学一定不会陌生。假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于像素，视口，分辨率，meta视口相关的内容展开叙述。要实现像素级还原，首先我们要搞清楚什么是像素。 #像素像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种特定颜色的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？ //废话 lol ，就是给它设置宽度200px 呗，stupid question..

移动端Web页面适配方案

阅读更多关于移动端Web页面适配方案

移动端Web页面适配方案移动端字体大小移动端适配移动端web bolelee 3月20日发布赞 | 6 收藏 | 67 6.3k 次浏览更新：完整 js 代码和 sass mixin 已上传于gitHub，点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。适配的目标引用一文章的描述：在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。概念理解在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的也是摘抄了其他文章的描述，本文末有附相关链接。 viewport视口 viewport是严格的等于浏览器的窗口。 viewport 与跟 viewport 有关的 meta 标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深入理解， viewport 与布局的关系，可以看下这篇文章：在移动浏览器中使用viewport元标签控制布局

前端移动端适配总结

阅读更多关于前端移动端适配总结

meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？不急，我们先往下面看，这里先留个悬念。几个专有名词和单位这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。首先，先来看一下物理像素。以iphone6为例，可知道：分辨率：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。屏幕尺寸：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。屏幕像素密度：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度 = 分辨率 / 屏幕尺寸接着，我们来看一下其他的单位。设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

移动web的适配

阅读更多关于移动web的适配

我在另一篇文章中谈到过一些移动端分辨率自适应问题，主要是基于个人实际开发中遇到的问题提出的解决方法。近期有幸听到他人对移动web开发的分享，特来补充上一篇文章，向大神讨教。 Part 1 理解关于长度单位的一些概念 1、设备像素或逻辑像素指设备能控制显示的最小物理单位，意指屏幕上一个个的点（还是不理解？？太正常了，接着往下看） 2、CSS像素或设备独立像素指CSS样式代码中使用的逻辑像素，即px（在iPhone中单位为pt）（这个好理解吧） 3、像素密度（PPI）指设备能控制显示的最小物理单位，意指屏幕上一个个的点（嘻嘻，=设备像素或逻辑像素） PPI越高，分辨率也就越高 4、像素比（dpr）设备像素比=设备像素/CSS像素比如：iPhone6的像素比为2 = 750/375 在开发中，UI设计狮以设备像素制作设计图；前端攻城狮把设备像素按照像素比进行换算，得到CSS像素，以此为单位制作网页进一步举例理解，在普通屏和2dpr下，css像素和设备像素的情况以下两种情况都会带来一定的图片不正常的问题 Part 2 关于视口的概念 1、Layout viewport（布局视口）浏览器默认设置了一个viewport 元标签，定义一个的虚拟视口，用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px

背景图

阅读更多关于背景图

背景画布特点：最小宽度为视口宽度最小高度为视口高度 HTML元素背景特点：覆盖画布 body元素背景特点：如果HTML元素有背景，body元素正常显示（背景覆盖边框盒）如果HTML元素没有背景，body元素的背景覆盖画布画布背景图(body) 特点：背景图的宽度百分比，相对于视口背景图的高度百分比，相对于网页高度背景图的横向位置百分比、预设值都相对于视口背景图的纵向位置百分比、预设值都相对于网页的高度来源： https://www.cnblogs.com/tujw/p/12002947.html

从头开始 — CSS — 垂直居中

阅读更多关于从头开始 — CSS — 垂直居中

事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。本篇文章将介绍比较流行的几种方法。行内块 <body> <div id="ghost"></div> <span> hello </span> </body> #ghost { display: inline-block; height: 20em; vertical-align: middle; } 本质上是利用了内联元素的 vertical-align 属性，通过将此属性置为middle，同一行内的内联元素都将以设置这一属性的内联元素的基线对齐。基于inline-block特有的属性：拥有内联元素的特性同时可以定义宽高，我们可以设置一个ghost行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。当然我们也可以将其它元素置为行内块，再设置宽度并添加text-align使其水平居中。总结一下，此方法太过hack。绝对定位子元素固定宽高 <div id="main"> <div id="child"> hello </div> </div> #main { background-color: green; height: 20em; width: 20em; position: relative; } #child { position:

我对移动端适配的了解

阅读更多关于我对移动端适配的了解

不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。but，我们要对于市面上的手机各式各样的分辨率进行适配，刚接触移动端开发的时候是不是有点猝不及防哈哈，尤其是去年年中以前老版本的微信内置浏览器用的X5内核，给网友们戏称移动端IE... 今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结，下面正式开始。基本概念和原理首先要了解的重要的基础知识点：物理像素，设备独立像素，设备像素比，css像素，布局视口，可视视口,理想视口以及css单位rem。物理像素（设备像素）屏幕的物理像素，又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了，是固定不变的。设备独立像素设备独立像素也可以理解为CSS像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。设备像素比设备像素比简称为dpr

【转】遮罩层——通过阴影弱化背景的四种方案

阅读更多关于【转】遮罩层——通过阴影弱化背景的四种方案

方法一：代码-1： /* 用于遮挡背景 */ .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8); } /* 需要吸引用户注意的元素 */ .lightbox { position: absolute; z-index: 1; width: 40%; height: 140px; background-color: #FFF; margin-top: 10em; margin-left: 30%; } 缺点：需要增加一个额外的HTML元素。这意味着该效果无法由css单独实现。方法二：伪元素方案代码-2： body.dimmed::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0, 0.8); } 优点：相对灵活，可一满足绝大多数人对遮盖层的期望。缺点：可移植性还不够好，因为 <body> 元素上可能有其它需要占用 : :before 伪元素。需要一点JavaScript来给添加dimmed这个类。伪元素无法绑定独立的JavaScript事件处理函数。、方法三：box

订阅视口