h5响应式布局 minimum-scale属性作用是啥?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5响应式布局 minimum-scale属性作用是啥?相关的知识,希望对你有一定的参考价值。

这是最小缩放值的意思。
可以设定网页缩放的范围,当用户双指或其他方式缩放网页的时候,"minmun-scale"就是最小能缩放的值。
参考技术A 本示例设置数值轴的最小和最大刻度值。
With myChart.Axes(xlValue)
.MinimumScale = 10
.MaximumScale = 120

End With

响应式布局

首先移动端必须要有一个meat标签

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

content="width=device-width 设置视口的宽度等于设备的宽度,如果不是设置的话默认宽度是980px,如果不设置的话就是,手机有多宽,我们的宽度就有多宽

user-scalable=no 禁止用户手动缩放
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0" 设置屏幕最大或最小的缩放比例

高清屏:苹果手机是2倍高清屏幕的,也就是我们在手机看到的那张100*100图片,其实苹果手机是按照200*200的尺寸给我们渲染的,这样的话,如果真是图片本身是100*100,呈现出来会有拉伸模糊的效果,
=》》苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以;
利用上移动端图片要搞1倍,2倍,3倍
使用media媒体查询,判断DPR倍数;分别操作
.box{
margin: 0 10px;
height: 150px;
background:url("banner1.jpg") no-repeat;
/*容器多大,图片多大*/
background-size: cover;
}
@media all and (-webkit-device-pixel-ratio: 2){
.box{

background:url("[email protected]") no-repeat;
/*容器多大,图片多大*/
background-size: cover;
border:5px solid #000;
}
}
@media all and (-webkit-device-pixel-ratio: 3){
.box{

background:url("[email protected]") no-repeat;
/*容器多大,图片多大*/
background-size: cover;
border:5px solid red;

}
}
这种做法繁琐,所以一般直接使用3倍图,直接用
媒体查询:@media
=>媒体设备:all所有设备 screen 所有屏幕设备PC+移动端 print打印设备
=》媒体条件:指定在什么条件下执行对应的样式
@media all and (max-width:319px){
      .box{
      height:100px;
      }
}
@media all and(min-width:320px) and (max-width:359px){
     .box{
     height:120px
     }
}
1.流式布局法
=》容器或者盒子的宽度一般都不写固定的值,而是用百分比
=》其余样式:字体、高度、mr/pd等等都是按照设计稿上标注尺寸的一般来设置;
=》对于有些屏幕尺寸下,我们设置的固定值看起来不是特别的好看的话,使用@media进行调整;
 

ok整体;一个真实响应式项目需要的meta标签有哪些

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no">
//忽略电话号码
如果有些号码需要调用拨号键, <a href="tel:123456">立即拨打电话</a>
<a href="sms:123456">立即发送短息</a>
<a href="mailto:[email protected]">发送邮件</a>
ios系统meta/link设置
1、开启对web app程序的支持
<meta name="apple-mobile-web-app-capable" content="yes">
说明:
    网站开启对web app程序的支持,其实意思就是删除默认的苹果工具栏和菜单栏,开启全屏显示
2、 改变顶部状态条的颜色;
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
    在 web app 应用下状态条(屏幕顶部条)的颜色;
    默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
Safari 浏览器有一个“添加到主屏幕”的功能,用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。
这个功能不仅方便用户快速访问我们的网站,而且也使我们的 WebApp 更像一个原生应用
因为 iOS 分辨率,所以 icon.png 图片的尺寸也各不相同,我们可以通过sizes属性来分别定义,iOS 系统会自动获取向匹配的图片:

<span style="font-size:14px;"><!-- iOS 图标 begin -->  
        <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>  
        <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->  
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>  
        <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->  
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>  
        <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->  
<!-- iOS 图标 end --></span>  

 

以上是关于h5响应式布局 minimum-scale属性作用是啥?的主要内容,如果未能解决你的问题,请参考以下文章

响应式布局

移动端H5---问题详谈

响应式布局

移动端响应式布局

响应式布局

响应式布局