标签:: 移动端

0

移动端重构小节(2)

话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足(重要的事情说三遍)要多学习多学习多学习。其实做项目提升还是很大的。 看到什么就写什么。 媒体查询做移动端和PC端会用到的东西。这也是高大上的(对我来说)响应式布局。CSS3 @media 查询仔细再看一遍才发现有些地方误解了。语法:123@media mediatype and|not|only (media feature) { CSS-Code;} 之前用的是@media all and (max-width:640px)以为前面的all是所有的尺寸=。=其实前面的是媒体类型,后面的是媒体功能。媒体类型主要使用:all print screen speech。看来一般用all了。媒体功能就很多了,这里不写。一般是定义大小和分辨率。兼容性:IE9以下需要引入JS文件:Respond.js。放到底部,并且要http协议才能用。当然会有一点延迟啦。写在媒体查询之外的样式会应用在全网页。后面做一个项目的时候用响应式设计,刚开始做的是移动端,设计师切好图我就直接写了。然后发现一个坑爹的事情,导致我拿到PC端的设计图时内心几乎是崩溃的。以后最好提前和设计师沟通,不然就是在给自己挖好多好多的坑(啊)。反正以后我重构不会让设计师帮我切图了。做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。

0

移动端重构小结(1)

前言:我是大懒虫Orz。一个月没有更新了=。=检讨一下。主要是在做一个移动端的app网页还有完成QT的作业还有过年还有益米的事情。真的要好好总结一下才能提升自己! 初始化meta标签<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />移动端的页面一定会用到的meta标签。相关概念: meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持 主要参数有下面几个: maximum-scale:用户可以缩放的最大值 minimum-scale:用户可以缩放的最小值 initial-scale:viewport的默认缩放大小 width:固定viewport的宽度 height:固定viewport的高度 user-scalable:是否允许用户缩放 前三个参数都是缩放相关的,它们的值是viewport的缩放大小,他们仅仅改变缩放大小,并不是改变viewport的实际大小。 之后就是width和height,修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器(页面区域)在屏幕上的默认大小。可以是具体的数值,也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上,防止出现横向滚动条就可以使用 最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样 参考:移动端的meta viewport 更详细的文章:移动前端开发之viewport的深入理解