viewport的故事（二）

【viewport的故事（二）】的更多相关文章

viewport的故事（二）

挑重点的翻译自原文 https://www.quirksmode.org/mobile/viewports2.html 在这一页我们将聊一聊移动端的浏览器. 移动端的问题最明显的问题就是尺寸,比PC端小很多,要么整体缩小,那么文字几乎小到认不出来了,要么就只能看一部分. 所以我们要让网站在小屏幕也能很好的展现. 最重要的问题集中在CSS上,尤其是视口的尺寸,如果把PC的一比一放到移动端上,肯定是不起作用的,甚至是有点可怕. 你的布局将会被挤压变形. 一种方式是为移动浏览…

两个viewport的故事（第二部分）

原文:http://www.quirksmode.org/mobile/viewports2.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身. 移动浏览器的问题当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸.为桌面浏览器所设计的网…

两个viewport的故事（第一部分）

原文:http://www.quirksmode.org/mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫.大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念.在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助. 概念:…

viewport的故事（一）

部分翻译自原文 https://www.quirksmode.org/mobile/viewports.html 概念:设备像素和CSS像素设备像素可以通过 screen.width/height 获取比如,iPhone 7 Plus 的设备宽度是414px: 如果一个元素设置了 width:128px,那么在一个宽为1024px的显示器中,你需要把屏幕放大八倍,就能让这个元素占满屏幕但如果用户已经设置了缩放为200%,那么要适应屏幕就还需要放大四倍. 用户缩放(zoom…

生活沉思录 via 哲理小故事

本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛,但却是失明的. 原来,托蒂刚出生时,这只眼睛轻度感染,曾用绷带缠了两个星期.这对常人来说几乎没有人任何副作用,对刚出生的婴儿来说,大脑由于长时间没有从这只眼睛接受任何外界信息,就认为它瞎了,原本该为它服务的大脑神经组织,也随之"战略转移"了. 小托蒂的不幸遭遇并非偶然个案.后来,研究人员在…

杂谈---小故事小道理，面试中的小技巧（NO.2）

本篇是接着上一篇面试随笔的,上一次有猿友反应写的有些“扯淡”,LZ思来想去最大的原因可能是由于上一章写的全是一些大忌,既然是大忌,那么在现实当中发生的概率还是相对较小的,大部分人还是很少在面试中犯如此重大的失误.不过只要能有一部分人从中获益,那么LZ费尽脑子码的字就没有白费. 本次为了更贴近现实,打入群众,LZ写上两个小技巧或者说小提示,希望能与更多的猿友产生共鸣吧. 小故事一李强是一个非计算机专业的大专生,迫于生活所逼,最终走上了编程路. 如今李强已经在程序员这一职位摸爬滚打了两个年头,但是…

前端页面开发，最低兼容IE 8的多设备跨平台问题解决！

项目要求: 网站能够使用PC.ipad.mobile phone正常访问页面PSD版式宽度分别为1024px和750px 参考资料使用CSS3 Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. Media Queries的语法如下所示: @media [media_query] media_type and media_feature 使用Media Querie…

【前端】移动端Web开发学习笔记【1】

下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了一些基本概念. Part 2: PC端的一些基本概念 screen.width/height 意义:用户屏幕的整体大小. 度量单位:设备像素. 浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题. 它们是显示器的属性,而不是浏览器的. window.pageX/YOffse…

草珊瑚的css基础

首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirction和unicode-bidi,display和float以及postion的三者关系,盒子模型. 一.viewport viewport是你所看到的窗口.它有两个重要属性,一个是css像素,另一个是设备像素. 设备像素由分辨率决定,css像素由开发者决定. 设备像素和css像素的关系有 1.重叠,即…

python之网络爬虫

一.演绎自已的北爱踏上北漂的航班,开始演奏了我自已的北京爱情故事二.爬虫1 1.网络爬虫的思路首先:指定一个url,然后打开这个url地址,读其中的内容. 其次:从读取的内容中过滤关键字:这一步是关键,可以通过查看源代码的方式获取. 最后:下载获取的html的url地址,或者图片的url地址保存到本地 2.针对指定的url来网络爬虫分析: 第一步:大约共有4300个下一页. 第二步:一个页面上有10个个人头像第三步:一个头像内大约有100张左右的个人图片指定的淘宝mm的url为:ht…