随笔分类 - 移动端
摘要:无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经烂熟于胸。从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画。限于篇幅,从初级到比较复杂的3D动画大概会说个三四个回合,我们就从最初级的东西开始说,由于这些知识大部分都是我个人根据文档所理解的,主要是当笔记。所以,也许会跟不少同学所理解的不太一样,甚至相悖,我希望大家可以在文章下面指出不对的地方,我们共同来学习。在我们以前使用绝对定位的时候就已经初步接触过Z轴,那时候只是简单的层叠,现在介绍一个更强大的属性:Transform 。从字面上就能看出,Transform
阅读全文
摘要:media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。随着移动互联网的发展,media query开始得到大家的重视。media type让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通过print类型为页面的打印格式提供更友好的界面。其实,media type有很多种:类型解释all所有
阅读全文
摘要:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Link study</title><!--竖版本使用的样式--><style media="all and (orientation:portrait)" type="text/css">#landscape { dis
阅读全文
摘要:1。 如何在台式机上模拟手机显示效果?为了在台式机上模拟手机的效果,建议使用opera或者chrome浏览器。很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。在使用chrome浏览器时,在Windows的【开始】-->【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:我比较喜欢这个:诺基亚N97:chrome.exe --user-agent="Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Pr
阅读全文
摘要:1<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)2、height : 和width相对应,指定高度3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例4、maximum
阅读全文