QQ内置浏览器下网页行高、字体大小显示异常解决
最近手机端测移动网页,偶然发现,iOS下访问都正常的页面,Android下微信内嵌浏览器、自带浏览器等都正常,唯独手机QQ内嵌浏览器下显示略不正常,比如设置了16px字体,看起来明显没有16px,而网页部分元素是由行高撑起的,没有固定高度。于是,正常的页面在QQ内嵌浏览器中显示出现没有垂直居中、元素高度缩小等。
一开始以为是兼容问题,简单搜了下,只有看到知乎上有人问类似问题,感觉有点不可思议,感觉这么"大"的问题不可能没人发现,于是就怀疑自己的写法是否有问题,首先打开页面时,在界面上打出某元素的font-size,结果,和设置的值14px相差甚远,算了一下,只有设置像素的79%。 查看更多...
自适应高度div内嵌iframe高度被撑开问题解决
标题有点长,就想表达一个意思,div自适应的情况下,内部嵌入iframe,iframe边框什么的全部设置0,本以为外层div可以完美自适应,结果div在不同浏览器却生生多出3-5个像素的高度。
找了下相关文章,发现确有此问题,有人说用负的margin值,可终究不完美,终极完美解决方案竟然是给iframe加display: block,或者vertical-align: bottom。
效果如图所示:
查看更多...
div绝对居中、宽高自适应、多栏宽度自适应
最近工作上有需求写一些页面,很久没动手了,发现很多排版、样式等技巧都忘得差不多了,几番折腾,还算解决了基本的布局问题。下面分享一下常见的几种div布局问题。
1、div绝对居中。
效果如下:
就是固定大小的div在浏览器中垂直、水平都居中,适合用到浮动弹出框、页面居中的登陆框等你想得到的地方。以前我也曾使用window.onload和window.onresize来控制高度自适应,宽度好说,兼容IE和其他主流浏览器的,直接文本居中,内部“margin:0 auto;”。 查看更多...
几种有用的网页排版技巧分享
在网页设计中经常会忽略排版,其实这是很不利于SEO和提高用户体验的举动,因为注重网页排版可以提高你的网页设计水平和可读性。下面分享几种有用的排版技巧,希望有用。
1、纠正行高
最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须按照文本字体大小来设定行高。
一般来说,在设置文本行高的时候,我经常在字体大小的基础上加上7个像素(对12-17像素的字体而言)
查看更多...
发布完善版WordPress手机主题一款
主题不是我个人所设计,只是在原有主题上加以修改的。近来有朋友提及博客首页访问页面时,想起来我的博客确实有手机页面,而且有wml和xhtml两个版本的,域名分别解析为wap和3g,昨天做了url匹配调整,发现很多功能不好用了,而且样式也过于老土,再说现在的手机这么强悍了,继续使用wml版也没必要了,于是卸载了原先使用的WP-T-WAP插件,打算找个更好的。
折腾了老半天觉得不如找个针对手机设计的主题,因为直接接触过类似Mobile Domain的绑定手机域名的插件,可以讲正常安装的主题显示在所绑定域名访问时显示指定主题样式,随手一搜,还真找到不少中意的主题。 查看更多...
CSS3动画技术应用基础分享
随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且形成了鼓励创新、避免hack、重前端脚本的氛围。
网络是一个非常好的环境,也是一个有丰富的知识来分享的协作社区。我们想要有圆角 ,我们就实现了它;我们想要 多背景图片,我们实现了它;我们想要 边框图片,我们也让它实现了。所以需求从来不是问题,否则,我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道,网络无所不能。
为网络而生
CSS 3的属性比如border-radius、box-shadow和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验,而且它们可以优雅的降级。然而,这些只是CSS 3能为我们做的众多事情中的一小部分。 查看更多...
Responsive Web design(响应式网页设计)
所谓Responsive Web design(响应式网页设计),通俗的说,就是可以自适应的网页设计。随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?目前各大网站、博客已经有向此方向改变的趋势,我们也得及时做下了解。
手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。 查看更多...
Photoshop CS6惊艳的新特性分享
3月份,Photoshop CS6 Beta版(下文简称PS CS6)发布公测,并在4月发布了正式版,因为网络以及电脑性能问题,再加上最近没有从事这方面的工作,没能及时体验,最近才注意到,photoshop cs6有着多项惊艳的新特性,工作中整天和像素打交道的朋友,感触比较深的特性可能就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格喽。 查看更多...
网页设计师必须知道的10件事
在做网站时会遇到很多的问题,所以网页设计师通常要扮演多种角色,并且要掌握如何构建一个有效实用的网站布局知识。
你在网页设计所学到的大多数教训都来自工作经验。学习是一个反复持续的过程,并且没有比犯错更好的方式来获得知识(从错误中学习)。在本文中,我们将讨论10个重要并常规的技巧,这是每位网页设计师新手都应该知道。
1. 优化图片,获得更好的页面加载速度
学习如何通过选择正确的格式,来优化网页图片,并确保文件大小在可行的范围你是足够小的。虽然现在人们已经都在使用宽带,但仍然有人是拨号上网。此外,虽然移动装置技术的普及,但移动装置却不一定支持像宽频一样的速度,图片文件的大小可能还是会延长网页的加载时间,有可能把用户赶走的。 查看更多...