关于移动端的适配问题
2018-08-08 16:01
344 查看
1.使用媒体查询功能
1.使用 @media
@media(conditions){ //要执行的css } 或者 @media(conditions1)and(conditions2){ //csscode }
例如:
@media(max-width:500px){ body{ background:red; } } 或者 @(min-width:300px)and(max-width:800px){ body{background:red;} }
- 当页面宽度小于等于500px设备。页面背景变红。
- 当设备宽度在(300,800)之间时,页面变红。
2.使用link媒体查询,引入外部的样式表
<link rel="stylesheet" href="style.css" media="(max-width:320px)">
- 当设备宽度小于320px 时引入的样式表(已经下载了)才会生效
dom.classList.toggle(“active”);
2.添加meta标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
历史原因,网页在小屏幕设备上显示时,会被缩小。比如原来1000px的页面要在340px的设备上显示完全,页面就会被缩小的很小,为了解决这个bug,可以再页面顶部加上上面的一行。
苹果利用设备宽度模拟的页面宽度为980px的页面。
viewport:视口
content=”width=device-width”:网页宽度等于设备宽度
user-scalable=no:用户不能缩放
initial-scale=1.0:初始缩放比例为1
3.创建两套htnl和css.后端进行检测设备,根据不同的设备使用不同的html。
手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条
手机端专用方案
基本概念
em:一个m的(一个汉字的宽度),相对于父元素字体大小
rem:(html)根元素的font-size,相对于html字体大小
vh \vw
1.使用rem动态设置页面大小。
思路:上面我们知道了单位rem就是html的font-size的大小;所以我可以利用JavaScript获得设备宽度后将html的font-size设为該值即可,代码如下:
<head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script> var pageWidth = window.innerWidth; document.write("<style>html{font-size:"+pageWidth+"px;}</style>"); </script> </head>
然后就可以以rem为单位动态的设置页面的宽度和高度了。他会根据不同设备自适应。
!!!!注意,
- 因为font-size会传给后代元素,所以别要忘了设置body{font-size:16px;}来覆盖掉html的font-size;
- meta标签也要加,负责页面会缩放
2.使用sass工具
1.在 SCSS 里使用 PX2REM
npm config set registry https://registry.npm.taobao.org/ touch ~/.bashrc echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc source ~/.bashrc npm i -g node-sass mkdir ~/Desktop/scss-demo cd ~/Desktop/scss-demo mkdir scss css touch scss/style.scss start scss/style.scss node-sass -wr scss -o css
编辑 scss 文件就会自动得到 css 文件
在 scss 文件里添加
@function px( $px ){ @return $px/$designWidth*10 + rem; } $designWidth : 640; // 640 是设计稿的宽度 .child{ width: px(320); height: px(160); margin: px(40) px(40); border: 1px solid red; float: left; font-size: 1.2em; }
即可实现 px 自动变 rem
阅读更多相关文章推荐
- 移动端各终端的适配问题研究--关于viewport
- 【关于适配】PopupWindow弹出时背景不变暗 或者 PopupWindow背景一闪一闪问题处理
- Android开发 关于小米手机适配的问题(持续追加)
- 关于iPhone456字体尺寸适配问题
- 关于AutoLayout适配的问题,及解决办法
- 关于移动端css+js解决遮罩问题方法。
- 关于iOS7的适配问题
- 关于移动端的click时间有延迟的问题(300ms延迟)
- 关于android屏幕适配的问题
- 关于屏幕适配的问题
- 关于android屏幕适配的问题(drawable-xxxxxxxx,dp,sp,px等等),偶尔看到了android源码,关于dpi的区分的值
- 关于DPR2.0&DPR3.0手机上的适配问题(focusdroid)
- iOS 10关于Masonry的适配问题
- 移动端适配1px问题
- 整理移动端的布局,适配问题
- 关于使用梆梆加固后,适配android5.0系统与64位机型的问题
- 关于iphone大屏手机的适配问题
- 关于移动端UI适配的整理
- 关于移动端的font和图片的问题
- 关于移动端h5页面不能滑动问题的解决办法