Jason Grigsby发表了篇文章,《CSS Media Query for Mobile is Fool’s Gold》对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法。然后 ...
分类:
其他好文 时间:
2016-09-06 19:41:00
阅读次数:
140
刚入前端不久,之前主要学的是PC端的布局,到公司之后负责的主要是移动端页面,刚开始时为了使页面适应移动端不同的屏幕大小采用的是百分比加媒体查询的方式,做完一个项目之后,感觉非常不好用,虽然最后也基本使页面做到了适配。所以做完这个项目之后…… ...
分类:
移动开发 时间:
2016-09-05 18:58:57
阅读次数:
351
效果展示: 一、每行固定个数:保证排版的美观 二、随页面宽度调整个数和大小:保证图文的可读性 1、媒体查询控制宽度 方便、但存在兼容性 2、JS控制 注意事项: 1、图片不变形 2、文字溢出处理 ...
分类:
其他好文 时间:
2016-09-01 11:10:43
阅读次数:
178
58同城笔试题:在PC和平板中一行三列,在手机上一列三行。 主要知识点:媒体查询,栅格化 下图是bootstrap原生的栅格参数: ...
分类:
其他好文 时间:
2016-08-31 20:18:55
阅读次数:
385
关于响应式布局,我的理解是:html5/css3响应式布局是利用css3的media媒体查询功能。移动端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media兼容问题。 一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式, ...
分类:
其他好文 时间:
2016-08-30 21:06:25
阅读次数:
178
响应式布局简明示例,响应式布局最好同时也是自适应布局,然后再配合css3媒体查询,来达到完美的响应式布局。css3的媒体查询ie9一下是不支持的,这太遗憾了,不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件,引用方式如下:<!--[if lt IE 9]> <script s ...
分类:
移动开发 时间:
2016-08-29 01:38:43
阅读次数:
151
响应式布局
MediaQuery的使用方法
在上例中,我们使用MediaQueries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达..
分类:
Web程序 时间:
2016-08-24 17:47:32
阅读次数:
278
1、选择器的优先级从高到低:ID、类、元素2、css扩展:选择器、框模型、背景和边框、颜色、字体、文字特效、2D/3D转换、动画、多列布局、用户界面。3、媒体查询:可以让你为不同的设备基于它们能力定义不同的样式。适合用于平板手机样式管理。4、last-child不一定会有,last-of-type一 ...
分类:
Web程序 时间:
2016-08-07 21:43:02
阅读次数:
169
响应式布局分为三部分: (1)流式布局 (2)媒体查询 (3)响应式布局 1流式布局(百分比布局) 1流式布局(百分比布局) 流式布局又叫百分比布局.宽高定位位置都以百分数参照父标签相应的尺寸.margin,padding的 top right bottom left 都为百分数. 盒子模型里面的m ...
分类:
其他好文 时间:
2016-08-06 17:38:54
阅读次数:
205