实现web页面按比例缩放
对于web的掌握限于可以看懂别人的代码,并在框架中作相应修改或增加。
今天把另一个项目中的网页源代码粘过来做一个页面,结果问题百出。
首先,同样的代码,放在自己的项目里,页面排版错乱,看了下,引用的web框架版本不一致,只好硬着头皮自己改了,于是乎:
把网页设置的百分比改了个遍,终于调出看着还好的效果,心情一下明亮了起来。结果手贱缩放了下,页面又是一通乱,心情顿时等到了谷底。鉴于自己是一个比较追求完美的人,看着一个不顺眼的页面,怎么也不能就这样让他消失,毕竟这只是掩耳盗铃而已。然后,又不是一通改,发现原来的代码中,页面宽度设置基友%又有px。统一为%后,总算好点了,虽然在某个缩放比例上会有问题,这实在不是我所能解决的,留待以后慢慢消化吧,还有其他任务呢。。。
总结:
1、别人的网页源代码在你的项目里不一定适用,可能和web框架的版本有关系(猜的,博主版本过低%>_<%)
2、页面要想按比例缩放,宽度和高度单位应该保持一致,%或px
3、其它,待续。。。。。。。
欢迎补充哈~
实现web页面按比例缩放的更多相关文章
- PC端页面同比例缩放
<meta name="viewport" content="width=1202"> //这行代码可以使PC端页面同比例缩放,不至于变形
- web页面放到手机页面,缩放问题
有时候写页面样式不规范,很多页面元素写死尺寸时,web页面尺寸比较大放到移动端访问时,就背缩放了,div或者按钮变得好小 可以加段js,效果会好点 <script> ! function( ...
- jQuery实现等比例缩放大图片让大图片自适应页面布局
通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...
- css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”
一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- web页面的适配问题
一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦. 其实解决电脑与手机的适配问题,一般有两个思路:一个是做判断,根据不同条件在css和js做 ...
- 常见的移动端Web页面问题
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...
- go-fastdfs和配套使用的web页面
go-fastdfs go-fastdfs是一个基于http协议的分布式文件系统,它基于大道至简的设计理念,一切从简设计,使得它的运维及扩展变得更加简单,它具有高性能.高可靠.无中心.免维护等优点. ...
随机推荐
- TCP/IP四层模型和OSI七层模型的概念
转:http://blog.csdn.net/superjunjin/article/details/7841099/ TCP/IP四层模型 TCP/IP是一组协议的代名词,它还包括许多协议,组成了T ...
- 详细说明svn分支与合并---命令行
一,svn分支与合并有什么用? 作程序的,对svn在熟悉不过了,但对svn分支熟悉的,我想并不多.因为一般情况下,是用不着svn分支的,其实也没有那个必要.下面我例举几个需要用到svn分支的情况: 1 ...
- c fopen文件读写
fopen <cstdio> FILE * fopen ( const char * filename, const char * mode ); Open file Opens the ...
- 2016 Multi-University Training Contest 5 World is Exploding
转载自:http://blog.csdn.net/queuelovestack/article/details/52096337 [题意]给你一个序列A,选出四个下标不同的元素,下标记为a,b,c,d ...
- HTML document对象(2)
五.相关元素操作: var a = document.getElementById("id");找到a: var b = a.nextSibling,找a的下一个同辈元素,注意包含 ...
- 用imageROI来增加某范围的像素
//用imageROI来增加某范围的像素 //作者:sandy //时间:2015-10-5 #include <cv.h> #include <highgui.h> int ...
- bug_ _Popwindow被魅族手机自带虚拟键挡住完美解决
======== 1 之前做了一个分享的功能,从底部弹出popwindow进行分享,但是由于部分手机自带虚拟键,如魅族X4,所以弹出的popwindow被虚拟键挡住, 在网上找了好多资料,一些资料说 ...
- 转: Ubuntu 安装字体方法
命令安装: 以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放在自己的主目录下)(在widows目录的Fonts目录下找需要的字体)由于我是双系 ...
- 协处理器CP15
在基于ARM的嵌入式应用系统中,存储系统通常是通过系统控制协处理器CP15完成的.ARM处理器使用协处理器15(CP15)的寄存器来控制cache.TCM和存储器管理.CP15包含16个32位的寄存器 ...
- [Flex] ButtonBar系列——最后一个项目的样式设置
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...