移动端适配sass以及布局

首先是vue配scss.
安装:
npm install node-sass sass-loader --save
使用:在style标签上
<style lang=scss>注意:只能用sass/scss/css

app{

.box{
div{

}
}
}
</style>

2.移动端事件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"/>
开启拨打电话/发送短信功能
<meta name="format-detection" content="telephone=no,email=no"/>
如果同样也需要禁止自动识别邮箱,可以在原来的基础上增加
WebApp全屏模式
<meta name="apple-mobile-web-app-capable" content="yes"/>
设置状态栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
添加到主屏后的图标
<link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题"/>
要是嫌麻烦的话,直接复制粘贴下面的到你的主页面❗💤
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

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

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

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

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

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

         希望有所帮助,喜欢的话,点个赞呗😆
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动端适配 (手淘) 在html页面中引入以下flexible.js flexible实际上就是能过JS来动态改写...
    yangxiaoming阅读 612评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,504评论 1 32
  • 我们第一次接触移动web的时候,直观印象样应该是:屏幕比pc小很多,所以对pc端设计的界面,不一定(或者说不完全)...
    Scaukk阅读 16,902评论 6 46
  • 移动端适配方案:1)viewport(scale=1/dpr)2)rem3)flex4)vm/vh一、什么是移动端...
    puxiaotaoc阅读 43,146评论 3 56