响应式布局

Posted 2020-11-05 追忆枉然

首先移动端必须要有一个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>