经常遇到JSP网页需要适合手机设备的大小问题
解决:
通过JSP加入
内容属性值:
width:可显示区域的宽度。 该值可以是数字或关键字设备宽度
最大比例=2.0,最小比例=1.0; 显示区域缩放级别
为了支持手机页面,width主要设置了设备宽度,device-width设置了使用设备的宽度。
REF:
网页布局原则
一.允许网页宽度自动调整:“适应网页设计”
在web代码的开头,输入一行视口元标记。
viewport是网页的默认宽度和高度。 上面的代码表示网页宽度默认等于屏幕宽度(width=device-width ),原始缩放比例(initial-scale=1)为1.0。 也就是说,网页的初始大小占屏幕面积的100%。 关于视口属性,我是在实际接触移动web开发后才遇到的。 一条ps布局都是固定的960px、1000px。
二.绝对不使用宽度
因为网页会根据屏幕的宽度调整布局,所以不能使用绝对宽度的布局或具有绝对宽度的元素。
这很重要。 具体而言,CSS代码不能指定像素宽度。 width:xxx px; 只能指定百分比宽度。 width: xx%; 或者,width :自动; 这里的开发意味着一个网页不仅可以在ps上同时使用,也可以在移动端同时使用,但是需要分别为webapp (如webapp )创建页面。
这个知识点对我目前正在做的项目很有用,主要用于控制从限定数据库读取的图像的宽度。
三.相对大小的字体
字体只能使用相对大小(em ),而不是绝对大小(px )。
body { font : normal 100 % Helvetica,Arial,sans-serif; }
上面的代码指定字体大小为页面默认大小的100%,即16像素。
h1{font-size:1.5em; }
然后,h1的大小是默认大小的1.5倍,即24像素。 (24/16=1.5 )。
small{font-size:0.875em; }
small元素的大小是默认大小的0.875倍,即14像素。 (14/16=0.875 )。
四.流布局(流动网格) ) )。
流布局是指每个块的位置是浮动的,而不是固定的。
. main{float:right; width:70%; }.leftBar{float:left; width:25%; }
float的优点是,如果宽度太小,容纳不下两个元素,后面的元素会自动向前一个元素下方滚动,而不会水平溢出,从而避免出现水平滚动条。 此外,还应密切注意“绝对位置”(position: absolute )的使用。
五.“自适应网页设计”的核心是CSS3引入的媒体查询模块。
这意味着将自动检测屏幕宽度并加载相应的CSS文件。
上面的代码表示如果屏幕宽度小于400像素(max-device-width: 400px ),将加载tinyScreen.css文件。
如果屏幕宽度为400到600像素,请加载smallScreen.css文件。 除了用html标记加载CSS文件外,还可以加载到现有的CSS文件中。
@importURL(Tinyscreen.CSS ) (screenand ) max-device-width3360400px );
六. CSS的@media规则
在同一CSS文件中,根据不同的屏幕分辨率,也可以应用不同的CSS规则。
@ mediascreenand (max-device-width :400 px ).column ) float:none; width :自动; }#sidebar{display:none; }
如果屏幕宽度小于400像素,则上述代码显示column块、浮动: none、自动调整宽度(width:auto )和sidebar块(未显示)
七.图像自适应(流体图像) ) ) ) ) ) )。
除了布局和勤奋的钢笔,“自适应网页设计”还必须实现图像的自动缩放。 这只有一行CSS代码。
img { max-width: 100%; }此代码对大多数网页中嵌入的视频也有效,因此可以编写如下
img,object { max-width: 100%; }
旧版本的IE不支持最大宽度。
所以,img { width: 100%; }
此外,在windows平台上缩放图像可能会导致图像失真。 在这种情况下,请尝试使用IE自己的命令。
img{-ms-interp}
olation-mode: bicubic; } 或者,Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。
手机浏览器页面点击不跳转(Android手机部分浏览器) 浏览器双击放大网页 解决
手机端web网页项目(angluar js 1.4.6) 1,网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转 ...
通过手机浏览器打开APP或者跳转到下载页面.md
目录 通过手机浏览器打开APP或者跳转到下载页面 添加 schemes 网页设置 参考链接 通过手机浏览器打开APP或者跳转到下载页面 以下仅展示最简单的例子及关键代码 由于硬件条件有限,仅测试了 A ...
html兼容手机浏览器
其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了:
【Excel】将IP按照IP地址(v4)增长序列排序
Background: Excel列中,有多个net-block, 将这些net-block按照IP地址(v4)自己的大小从小到大排序. Idea: IPv4地址的格式是点分十进制的,也就是说每一个点 ...
自学Linux Shell9.2-基于Red Hat系统工具包存在两种方式之一:RPM包
点击返回 自学Linux命令行与Shell脚本之路 9.2-基于Red Hat系统工具包存在两种方式之一:RPM包 本节主要介绍基于Red Had的系统(测试系统centos) 1. 工具包存在两种方 ...
kubernetes的Kubelet
1. kubelet简介 在kubernetes集群中,每个Node节点都会启动kubelet进程,用来处理Master节点下发到本节点的任务,管理Pod和其中的容器.kubelet会在API Ser ...