》》HTML5 移动页面自适应手机屏幕四类方法
1、使用meta标签:viewport
H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
viewport标签极其属性:
每个属性的详细介绍:
属性名
取值
描述
width
正整数或device-width
定义视口的宽度,单位为像素
height
正整数或device-height
定义视口的高度,单位为像素,一般不用
initial-scale
[0.0-10.0]
定义初始缩放值
minimum-scale
[0.0-10.0]
定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale
[0.0-10.0]
定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable
yes/no
定义是否允许用户手动缩放页面,默认值yes
2、使用css3单位rem
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px;font-size:.875rem;}
默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。
通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为基数。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:
Html{font-size:62.5%(10/16*100%)}
具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:
(function(doc, win) {
vardocEl = doc.documentElement,
resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function (){
varclientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 20* (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif
3、使用媒体查询
媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。
媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。
例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:
@media only screen and (max-width: 500px) {
body {
}
}
4、使用百分比
百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;
所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。
》》HTML5 移动页面自适应手机屏幕四类方法的更多相关文章
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...
- web页面自适应手机屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
- WAP网站WML或HTML页面自适应手机屏幕实现方法
把图片和div的宽度都设置成:width:100%就可以了
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- 使PC端网页宽度自适应手机屏幕大小
有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...
- asp.net 页面,文字自适应手机屏幕
(1)在<head>和</head>之间插入代码. <meta name="viewport" content="width=device- ...
- 移动端页面按手机屏幕分辨率自动缩放的js
<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...
- CSS-页面超出手机屏幕
手机页面左滑,页面超出手机屏幕. 解决方法: html,body{ overflow-x: hidden; } 从而解决问题,锁住横向滑动的屏幕.
随机推荐
- AngularJS学习篇(十四)
AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...
- [array] leetCode-4-Median of Two Sorted Arrays-Hard
leetCode-4-Median of Two Sorted Arrays-Hard descrition There are two sorted arrays nums1 and nums2 o ...
- 六:Dubbo与Zookeeper、SpringMvc整合和使用
DUBBO与ZOOKEEPER.SPRINGMVC整合和使用 互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架 ...
- 用C#操作IIS创建虚拟目录和网站
#region CreateWebsite 添加网站 public string CreateWebSite(string serverID, string serverComment, string ...
- [转载] linux中文件描述符fd和文件指针flip的理解
转载自http://www.cnblogs.com/Jezze/archive/2011/12/23/2299861.html 简单归纳:fd只是一个整数,在open时产生.起到一个索引的作用,进程通 ...
- 学会WCF之试错法——数据传输
数据传输 服务契约 [ServiceContract] public interface IService { [OperationContract] string GetData(int value ...
- C语 三子棋小游戏
#include <stdio.h> #include <Windows.h> #include<time.h> #define row 3 #define lis ...
- MD5 SHA1 HMAC HMAC_SHA1区别
MD5.SHA1.HMAC.HMAC_SHA1区别 引言 什么是MD5,什么是SHA1,如何校验这些Hash.还有拿单个apk文件的MD5,SHA1讯问是不是原版的问题,在这里,让我们先来了解 ...
- SpringMVC---@RequestMapping
配置文件 承接第一,二章 index.jsp <%@ page language="java" contentType="text/html; charset=UT ...
- Java8 方式解决Stream流转其他数组
Java8 方式解决Stream流转其他数组 一. 题记:原来的List转数组用的是如下方式: example private static void listToStringArray(List l ...