h5页面自适应 - CSDN
精华内容
参与话题
  • initial-scale=1.0 initial-scale为设置页面的初始缩放值,可以是一个带小数的数字,1.0就是占网页的100% minimum-scale=1.0 表示最小的缩放比例 maximum-scale=1.0 表示最大的缩放比例 user-scalable=no 表示用户...

    今天写app用到了页面自适应的内容,由于很久没有写过了,当时脑子也不好使了,就怎么也写不出来,最后才知道原因,页面自适应主要用于手机移动端app较多,所以,要熟练掌握!

    PS:附代码(见末尾)

    1、首先在网页代码的头部,加入一行viewport标签

    在网页的头部中增加以下这句话,可以让网页的宽度自动适应手机屏幕的宽度

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    

    width=device-width width为设置layout viewport 的宽度,为一个正整数,”width-device”表示宽度是设备屏幕的宽度
    initial-scale=1.0 initial-scale为设置页面的初始缩放值,可以是一个带小数的数字,1.0就是占网页的100%
    minimum-scale=1.0 表示最小的缩放比例
    maximum-scale=1.0 表示最大的缩放比例
    user-scalable=no 表示用户是否可以调整缩放比例,值为”no”或”yes”

    2、宽度不要用绝对的

    width:auto; / width:XX%;(父元素一定要有宽度)
    

    3、字体大小是页面默认大小的100%,即16像素,不要使用绝对大小"px",要使用相对大小“rem”

    html{font-size:62.5%;}
    body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; } 
    

    html的字体大小设置为font-size:62.5%原因:浏览器默认字体大小是16px,rem与px关系为:1rem = 10px,10/16=0.625=62.5%,为了子元素相关尺寸计算方便,这样写最合适不过了。

    4、流动布局,"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的

    .left{ width:30%; float:left} 
    .right{ width:70%; float:right;}
    

    像这样,用左浮动和右浮动,好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现

    5、选择加载CSS

    "自适应网页设计"的核心,就是CSS3引入的Media Query模块。自动探测屏幕宽度,然后加载相应的CSS文件

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
    

    这段代码的意思是:如果屏幕宽度小于600像素(max-device-width: 600px),就加载css600.css文件。
    如果屏幕宽度在600像素到980像素之间,则加载css600-980.css文件

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" /> 
    

    还有(不建议使用):除了用html标签加载CSS文件,还可以在现有CSS文件中加载

    @import url("css600.css") screen and (max-device-width: 600px); 
    

    6、CSS的@media与@media screen,媒体查询/匹配

    媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕

    媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

    首先先讲一下@media与@media screen区别

    @media与@media screen两者在手机设备上没有区别,但@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media 。

    语法

    以@media或@media screen and开头来表示这是一条媒体查询语句。@media后面的是一个或者多个表达式,如果表达式为真,则应用样式。

    @media

    @media (max-width: 600px) {
      .mainner {
        display: none;
      }
    }
    

    上面的代码在屏幕宽度小于 600px 的时候,会作用大括号里的内容。

    注:max-width是目标显示区域的宽度,例如,浏览器宽度。

    媒体查询可以在 link标签上加media属性或css文件中使用。具体例子就不举了。

    @media screen

    以下例子为当屏幕宽度小于400px的时候,就取消浮动

    @media screen and (max-device-width: 400px) 
    {  .left {
    	 float:none;
       } 
     }
    

    注:max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。

    知识扩展
    @media only screen and
    only(限定某种设备)
    screen 是媒体类型里的一种
    and 被称为关键字,其他关键字还包括 not
    not 指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器:

    例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }
    

    7、图片自适应,"自适应网页设计"还必须实现图片的自动缩放。

    img {width: 100%;} 
    

    windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

    img { width:100%; -ms-interpolation-mode: bicubic;} 
    

    或使用js–imgSizer.js

    addLoadEvent(function() { 
      var imgs = document.getElementById("content").getElementsByTagName("img"); 
      imgSizer.collate(imgs); 
    });
    

    附代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title></title>
    		<style type="text/css">
    			body{
    				background: url(images/bg.png) no-repeat;
    				background-size:100% 100%;
    				background-attachment: fixed;
    			}
    			.container{
    				width: 100%;
    				text-align: center;
    				position: absolute;
    				top: 96px;
    			}
    			 .container img{
    				transform: scale(0.8);
    				height: auto;
    				width: auto\9;
    
    			}
    			#img1{
    				width: 100%;
    				position: absolute;
    				bottom: 10px;
    				margin-bottom: 40%;
    				transform: scale(0.9);
    				/*background: yellowgreen;*/
    			}
    			#img2{
    				width: 100%;
    				position: absolute;
    				bottom: 20px;
                    margin-bottom: 12%;
    				transform: scale(0.9);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<img src="images/logo@2x.png" alt="" />
    		</div>
    		<input type="image" src="images/iOS@2x.png" id="img2"/>
    		<input type="image" src="images/Android@2x.png" id="img1"/>
    		
    	</body>
    </html>
    

    ps:最重要的就是css样式,注意细节,要不断尝试

    展开全文
  • H5 仿阿里自适应页面

    2020-07-24 23:32:16
    NULL 博文链接:https://onestopweb.iteye.com/blog/2379844
  • h5手机端页面自适应屏幕大小 rem

    千次阅读 2020-08-17 15:35:57
    1.在首页添加一段js,页面字体单位使用rem.&lt;script&gt; (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ....
    1.在首页添加一段js,页面字体单位使用rem.
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    
                    };
    
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    
    </script>
    2.媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。
    
     

    3.使用css3的属性:

     

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimun-scale=1, user-scalable=no">

    <script>

        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '100px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        }
                    };
    
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        <%--如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)--%>
    </script>
    4、使用百分比

    百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

    所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    注意:没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法,多种方法灵活运用,才是王道。

     

    展开全文
  • 要实现手机屏幕自适应布局(样式),可以使用手淘H5开发模式 1.在主页面index.html中引入js文件 &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &...

    要实现手机屏幕自适应布局(样式),可以使用手淘H5开发模式

    1.在主页面index.html中引入js文件

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <script src="https://front-h5.oss-cn-hangzhou.aliyuncs.com/flexible.js"></script>

     或者

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    2. 使用vscode,安装px2rem插件,并设置根的font-size为75。(UI设计稿尺寸为750px)

     

    3. 使用方式 :在写样式时根据设计稿上的尺寸,例如:输入20px自动转换为对应的rem 

    具体原理参考使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备

    展开全文
  • H5移动页面自适应

    万次阅读 2017-07-27 13:56:11
    H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。   viewport 是用户网页的可视区域。翻译为...

    1、使用meta标签:viewport

    H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

     

    viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

    手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

     

    viewport标签极其属性:

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    每个属性的详细介绍:

    属性名 取值 描述
    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一次定义方法如下:

    复制代码
    <script type="text/javascript">
       (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = 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);
    </script>

    复制代码

     

    3、使用媒体查询

    媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。

    媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

    例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }

     

    4、使用百分比

    百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

    所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    展开全文
  • H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。   viewport 是用户网页的可视区域。翻译为...
  • 整理H5|web移动前端自适应适配布局解决方案

    万次阅读 多人点赞 2017-12-28 15:57:13
    方案: ...我觉得有些web app并一定很复杂,比如拉勾网,你看看它的页面在iphone4,iphone6,ipad下的样子就知道了: 它的页面有一个特点,就是: 顶部与底部的bar不管分辨率怎么变,它的高度
  • h5页面基础:自适应移动端

    千次阅读 2019-08-20 14:55:35
    h5页面布局前,先在body底部引入rem.js,来自适应不同分辨率的屏幕。 !(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize...
  • 移动端H5页面自适应手机屏幕宽度

    万次阅读 2018-01-26 11:23:37
    移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果。 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem.sublime-settings文件...
  • H5页面自适应

    2019-07-17 16:28:41
    对于一些带底图跟文字的H5页面要求自适应的,发现一些网站是这么干的 document.documentElement.style.fontSize =document.body.clientWidth / 320 + "px"; 页面中的元素在设置字号及大小时候,使用rem即可。 ...
  • <script> resize() window.onresize = function() { resize() } function resize() { var docEl = document.documentElement var clientWidth = window.i...
  • 在html head中添加: <script type="text/javascript"> var phoneScale = parseInt(window.screen.width)/640; document.write('<meta name="viewport" content="width=640, minimum-scale = '+...
  • 之前写h5注册页的时候,总是适配不好,用过媒体查询,但是效果不太好,而且要适配的尺寸太多了,总归有遗漏的,时长达不到ui设计图的标准,后来在网上找了一篇适配的js代码,但是因为不太明白,所以使用的也不好哈哈...
  • h5移动端自适应js

    2020-03-13 11:02:29
    <!DOCTYPE html> <html lang="cn"> <head> <meta charset="utf-8" />...meta id="viewport" name="viewport" content="width=device-width,height=device-height,use...
  • 把这些代码放到js里面,规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在...
  • 利用rem实现h5自适应

    千次阅读 2017-04-18 18:55:36
    利用rem实现h5自适应最近做h5比较多,从老大那里学到一招,超级实用。快速h5像素级切图,不用在费力地计算rem值啦。
  • h5 自适应实现

    千次阅读 2019-06-15 10:50:48
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 现在手机端的项目比较多,自适应不用说那是必备技能了,目前应用的单位最多还是rem, 然而每次在制作过程中需要自己计算rem值比较繁琐,现在分享下postcss-pxtorem的使用可以把px直接转换为rem,省下了计算的体力了 ...
  • 首先页面顶部加上style &lt;style&gt; html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @med...
  • H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。   viewport 是用户网页的可视区域。翻译为...
1 2 3 4 5 ... 20
收藏数 6,809
精华内容 2,723
热门标签
关键字:

h5页面自适应