h5 移动端适配3中方式

来源：互联网发布：godaddy虚拟主机 java 编辑：程序博客网时间：2024/06/14 00:12
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><style>html{}body{background-color: royalblue;box-sizing: content-box;}.a{height: 19rem;width: 19rem;background-color: aquamarine;}.b{height: 14rem;width: 14rem;background-color: chartreuse;}.c{height: 7rem;width: 7rem;background-color: darkblue;}/* * 1 固定写法@media only screen and (width: 320px) {html {font-size: 16px;}}@media only screen and (width: 360px) {html {font-size: 18px;}}@media only screen and (width: 375px) {html {font-size: 18.75px;}}@media only screen and (width: 400px) {html {font-size: 20px;}}@media only screen and (width: 411px) {html {font-size: 20.55px;}}@media only screen and (width: 414px) {html {font-size: 20.7px;}}@media only screen and (min-width: 640px) {html {font-size: 32px;}}* * *//* * 2 区间写法 * @media only screen and (max-width: 320px) {    html {        font-size: 16px;    }}@media only screen and (min-width: 321px) and (max-width: 360px) {    html {        font-size: 18px;    }}@media only screen and (min-width: 361px) and (max-width: 375px) {    html {        font-size: 18.75px;    }}@media only screen and (min-width: 376px) and (max-width: 384px) {    html {        font-size: 19px;    }}@media only screen and (min-width: 385px) and (max-width: 413px) {    html {        font-size: 19px;    }}@media only screen and (min-width: 414px) and (max-width: 480px) {    html {        font-size: 20.7px;    }}@media only screen and (min-width: 481px) and (max-width: 540px) {    html {        font-size: 27px;    }}*/    /** 它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： * */</style></head><body><div class="a"><div class="b"><div class="c">asdasd</div></div></div><script>//3 js方式window.onload = function () {var screenWidth = window.screen.width;var widht = document.getElementsByClassName('a')[0];var html = document.getElementsByTagName('html')[0];html.style.fontSize = (screenWidth/20)+"px";//console.log('fontsize= '+fontsize);console.log('大盒子宽度= '+widht.offsetWidth);}</script></body></html>
0 0