HTML5 手机端动态适配

CSS控制

　　　　em、rem布局

　　　　这里给出一个自己常用的实例，CSS控制移动端不同机型的适配主要是利用媒体查询来根据屏幕宽度来决定html的基础字体的大小，在body内的块级元素的话就可以用rem或者em单位来对页面进行布局了。其中的不同是rem是基于body的font-size来确定的，而em则是根据其父元素的font-size来决定的，可以说各有利弊，如果是将设计稿转换为Html的话，使用媒体查询+rem比较方便计算出每个的数据，而em可能相对麻烦一下，但是在调节页面的时候，如果使用了em布局，如果只是想页面的某一块的大小进行调整，那么只需要更改其父元素的em大小即可，不用更改其每个子元素。因此使用rem和em都是根据个人的情况和实际项目来决定。

 1 @media screen and (min-width: 320px) {html{font-size:50px;}}
 2 @media screen and (min-width: 360px) {html{font-size:56.25px;}}
 3 @media screen and (min-width: 375px) {html{font-size:58.59375px;}}
 4 @media screen and (min-width: 400px) {html{font-size:62.5px;}}
 5 @media screen and (min-width: 414px) {html{font-size:64.6875px;}}
 6 @media screen and (min-width: 440px) {html{font-size:68.75px;}}
 7 @media screen and (min-width: 480px) {html{font-size:75px;}}
 8 @media screen and (min-width: 520px) {html{font-size:81.25px;}}
 9 @media screen and (min-width: 560px) {html{font-size:87.5px;}}
10 @media screen and (min-width: 600px) {html{font-size:93.75px;}}
11 @media screen and (min-width: 640px) {html{font-size:100px;}}
12 @media screen and (min-width: 680px) {html{font-size:106.25px;}}
13 @media screen and (min-width: 720px) {html{font-size:112.5px;}}
14 @media screen and (min-width: 760px) {html{font-size:118.75px;}}
15 @media screen and (min-width: 800px) {html{font-size:125px;}}
16 @media screen and (min-width: 960px) {html{font-size:150px;}}

　　　　百分比布局

　　　　对于不同的屏幕宽度，使用百分比布局也是一种动态适配的好方法，尤其是有事在需要让几个元素充满整行的情况，分别用百分比相对于使用rem或者em来设置其宽度更为方便，省去了计算的麻烦，因此在实际的操作中我常常使用rem和百分比相结合的布局方法。

Js控制

　　　　js控制的原理是利用initial-scale属性对屏幕进行缩放，如下面的代码，在切图的过程中，所有的尺寸都是基于750px屏幕宽度下进行布局，所以只需要以实际尺寸与750px的比例来把页面缩放就可以达到动态适配的目的。这个方法虽然看起来很简单，但是因为用了js还需要考虑到浏览器的兼容性问题，可以去参考一下PPK关于viewport的几个看法。

1 (function(){
2         var rate=screen.width/750;
3         console.log(rate);
4         document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+rate+'">');
5     })();

转载于:https://www.cnblogs.com/cheerup/p/6179496.html

HTML5 手机端动态适配相关推荐

html5 手机端 select,适配性强的移动端select选项框
需求来源原生的select有很多样式不能随意改动,比如不能设置居中不生效,select框长度不能根据内容自适应等.而且在ios端和安卓端显示的样式不统一.所以为了解决以上问题,基于swiper对se ...
机械厂html5手机模板,营销型机械消费设备企业通用织梦模板（带html5手机端） v1.0...
营销型机械消费设备企业通用织梦模板简介营销型机械消费设备企业通用织梦模板(带html5手机端)v1.0是一个自适应手机端和PC端的最新版织梦V5.7为内核的网站模板,软件兼容主流浏览器,模板包含安装 ...
html5手机端页面缩放问题的解决
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...
html5 自动分享到朋友圈,html5手机端分享微信朋友圈代码
特效描述:html5手机端分享微信朋友圈.html5手机端分享微信朋友圈代码代码结构 1. HTML代码发送给朋友分享到朋友圈 button{width:100%;text-ali ...
table 手机滑动_【推荐下载】html5手机端手指滑动选项卡滚动切换效果(转)
html5 手机端手指滑动选项卡滚动切换效果 ( 转 ) 2017/09/25 41 !DOCTYPE html html lang="en" head meta charset= ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
html手机自动放大,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
手机游戏缺少index_264.html,html5手机端大家来找茬微信小游戏代码
特效描述:html5 手机端大家来找茬微信小游戏代码.html5手机端大家来找茬微信小游戏代码代码结构 1. HTML代码重新开始剩余时间: 30 s 分数: 0 点击开始游戏护眼 ...
html页面手机自动缩放,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...

HTML5 手机端动态适配

HTML5 手机端动态适配相关推荐

最新文章

热门文章