PC、各手机浏览器自适应问题

尔东主机 2017-11-15 06:52:21

以下代码自适应代码似乎没有生效，为什么呢？请不吝赐教！



<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/css.css">

    <link rel="stylesheet" href="css/mycss.css" type="text/css" />

    <meta name="format-detection" content="telephone=no"/>

    <meta name="apple-mobile-app-status-bar-style" content="black" />

    <meta name="apple-touch-fullscreen" content="YES" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <meta http-equiv="Cache-Control" content="no-cache" />

    <script src="js/jquery.min.js"></script>

</head>

<body>

<div id="main">

    <div id="main1">

        <div id="mid">

            <img id="tiyan" src="image/tiyan.png">

            <img id="pengyouquan" src="image/pengyouquan.png">

            <img id="master" src="image/master.png">

        </div>

        

        <div id="right">

            <img id="android" src="image/q.png">

            <img id="ios" src="image/q.png">

            <img id="little" src="image/q.png">

        </div>

    </div>

</div>

    

<div style="display:none;">

  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260659660'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1260659660%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>

</div>

</body>

</html>



/****

author:cjq, date:20171115

*****/



html, body, div, h1, h2, h3, h4, h5, h6, p,dl, dt, dd, ol, ul, li,fieldset, form, label,input,legend,textarea,button{ margin:0; padding:0;}

h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight:normal}

ul,ol{list-style:none;}

img{border:0 none; vertical-align:top}

strong,em,i,b{ font-style:normal; font-weight:normal}

a{ text-decoration:none;}

body{ font:12px/1.5 \5FAE\8F6F\96C5\9ED1,Tahoma, Geneva, sans-serif; background:#fff}

.clear_fixed{zoom:1;}

.clear_fixed:after{ content:""; display:block; clear:both; font-size:0; line-height:0; visibility:hidden;}



#main {width:100%;}

#main1 {width:1rem;background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #5B3A83), color-stop(1, #493166));}

#mid {width:1rem;}

#mid p1,#mid p2 {color:#fff; text-align=center; margin:0; text-align:center; font-size:0.01rem; margin-bottom:-0.016rem;}



#logo,#tiyan,#pengyouquan,#mid a,#master,#mid p {margin:0 auto; float:none; display:inline-block; height:auto;}



#logo {max-width:0.113rem;width:0.113rem;}

#tiyan {max-width:0.113rem;width:0.113rem;}

#pengyouquan {max-width:0.377rem;width:0.377rem;}

#mid a img {max-width:0.127rem;width:0.127rem;}

#master {max-width:1100px;width:1100px;overflow:hidden;margin:0 auto;}

#mid p {font-size:0.01rem;}



#right {margin:0.022rem 0.034rem 0 0;display:inline-block; height:auto;}



#android,#ios,#little {margin:0.022rem auto o auto; float:none; display:inline-block; max-width:0.088rem; height:auto;}

...全文

761 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

业余草 2017-12-03

打赏
举报

使用Bootstrap框架吧， HTML5 移动页面自适应手机屏幕四类方法 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中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。