首页 > 编程知识 正文

html手机页面自适应,手机浏览器自适应屏幕

时间:2023-05-05 00:42:25 阅读:54055 作者:160

经常遇到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 ...

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。