页面缩放对css的影响

昨天发现一个上线的项目css样式明显不对,但是查看别人的电脑上的页面样式都是没问题的,于是找了半天原因,原来是我的浏览器对这个页面缩放了,导致样式问题. 发现了页面缩放会作用在同一个域名下的所有页面,所以我之前做的一个项目对news.sina.com.cn域名下的一个页面使用了缩放,结果昨天上线的项目也在这个域名下,不知不觉也缩放了,以后遇到css样式问题要考虑下是否是页面缩放导致的.…

这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用之前虽然写了代码,但是一直没有注意到缩放后页面的效果会改变的事情,这几天还是别人发现了,来告诉我有这种问题,我才知道,感觉有点失败啊:关键的问题是,即使知道了问题,还不知道怎么处理,这才是最大的问题: 现象如下: 缩放后,有一部风图标的位置就不够了,被挤了下来 css 如下:使用元素的固定宽度 position: relative; float:…

Appcan开发之页面布局与CSS排版(转)

在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通web开发基本没有区别,理解成webapp的开发或许更好解释. iOS.Android系统中已经内置webkit内核,而appcan正是利用webkit来运行我们编写的页面,也就是可以将appcan看作是一个加强的webkit内核,强在它能通过js来控制手机某些功能,比如打电话.发短信.定位等等,这…

关于手机端适配的问题（rem，页面缩放）

关于手机端适配的问题(rem,页面缩放) 96 进击的小前端关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端的时候,如果想引用别的UI库的时候,自己页面写的是rem单位,而ui库的css里面写的是px,大家都知道,rem是在html上设置font-size 字体大小.然后,,然后ui库的里面的px 会和 rem冲突,很麻烦,搜了很多办法都没找到好的解决办法!!! rem的做法 (function() {…

无障碍阅读：页面缩放兼容性处理（zoom,Firefox火狐浏览器）

1.无障碍阅读使用场景无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug,不起作用. 中国海事局(http://www.msa.gov.cn/): 无障碍阅读一般包括以下功能: 1.1 页面放大 1.2 页面缩小 1.3 文字放大(页面所有文字字号逐渐变大) 1.4 文字缩小(页面所有文字字号逐渐变小) 1.5 开启对比度(页面所有背景变黑,文字变白) 以上功能中,最主…

使用chrome查看页面元素的css样式

使用chrome查看页面元素的css样式我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. 我们希望看到博客园这张图片的具体信息.就可以打开chrome的开发者工具,点击箭头后选中该图片,这时代码就自动定位到了该元素的HTML代码,如下图所示: 这个页面中,右上方的蓝色阴影下即为图片元素所在的HTML代码,而开发者工具的左下方就是该元素的css样式代码: 其中最上面的是行内样式, 往下有我…

兼容IE6的页面底部固定层CSS代码

有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下: .bottom { background:#000; color:#fff; bottom:; margin:0 auto; position:fixed; height:23px; opacity:.60; filter:alpha(opacity=60); line-height:23px;…