前端pc端、手机端适配基本知识
前端pc端、手机端适配问题
一个项目如何做到手机、电脑共用的方式
1、第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机、电脑共享。一般而言,手机、电脑共享样式,其布局样式必须单调简单,因此一般是企业宣传网站使用。微软官网就是典型的响应式网站。
2、第二种方式:实际上是手机端、电脑端是分开的两套代码,只是通过获取设备信息运行相应的代码。如京东商城这样的功能强大的网站都是手机电脑分别开发的。
像素的基础知识
iphone 6/7/8的逻辑分辨率375667,分辨率为7501334
- px 逻辑像素,是浏览器使用的抽象单位,并不固定
- dp(或者叫pt) 设备独立像素
- dpr 设备像素比
不同移动设备的逻辑分辨率:
viewport
使用meta标签定义viewport,在content中写属性,用逗号隔开:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
相对尺寸
第一种:% 与 vw vh
将viewport视口宽高均分为100份
- % width:10%,即宽度为视口宽度的10%;
- vw width: 10vw,即宽度为视口宽度的10%;
- vh height:10vh,即高度为视口高度的10%;
第二种:em 与 rem
em:(font size of the element)是指相对于父元素的字体大小的单位。
rem:(font size of the root element)是指相对于根元素(标签)的字体大小的单位。
下面这段代码是根据不同设备等比例的设置html的font-size大小,然后就可以用rem作为单位进行不同设备的适配。即按照750px的设计稿来说,如果量的尺寸width为100px,那么你的css即可写为1rem。
(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = docEl.clientWidth;if(!clientWidth) return;//750为设计稿的宽度,不同设计稿需要修改//设计稿元素宽度为100px,那么css样式写1rem,即可在不同尺寸屏幕下完美适配docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';};if(!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
媒体查询
<style>/*使用rem 以iphone6的375为基准*/ html{font-size: 100px;}h1{ font-size:0.25rem; text-align: center;}p{ font-size:0.16rem}/*logo图片尺寸:787*105 height计算:375÷787×105÷100px (1rem=100px) */.logo{ width: 100%; height:0.5rem; display: block;}/*媒体查询*/@media (min-width:320px ) {html{font-size: 85.3px} /* 320/375*100px=85.3px */}@media (min-width:360px ) {html{font-size: 96px} /* 360/375*100px=96px */}@media (min-width:375px ) { html{font-size:100px} }@media (min-width:414px ) {/* 414/375*100px=110.4px */html{font-size: 110.4px}}@media (min-width:768px ) {/* 768/375*100px=204.8px */html{font-size: 204.8px}}
</style>
字体矢量图标iconfont
iconfont(图标字体),将字体文件中的文字替换成了图标,输入该文字的unicode编码,就会显示图标。
可以在阿里矢量图标库 、icomoon免费下载图标字体文件(也可以使用字体编辑软件定制)。
优点:
这种图标本质就是文字(可无损放大),通过css样式,定义大小、颜色等,不用再使用背景图片。
缺点:
图标只能是单色的(视同文字),无透明、阴影、渐变等效果。
flex弹性盒模型
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为布局提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
采用 Flex 布局的元素,称为:flex container。它的所有子元素自动成为容器成员,称为:flex item。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
Flex 布局教程:语法篇
Flex 布局教程:实例篇
前端pc端、手机端适配基本知识相关推荐
- PC端手机端百度查排名工具(SEO工具)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kaeX0TZN-1637306311903)(http://cdn.h3blog.com/20211119142524. ...
- 天涯明月刀无法显示服务器,天涯明月刀登录不进去怎么办 pc端手机端服务器已满怎么解决_游戏369...
天涯明月刀这款手游终于公测了,每个玩家都可以在这里创造属于自己的江湖世界,不同的人会有不同的旅程,所以想要拥有一段属于自己江湖旅程就一定不要错过天刀这款手游,不过这款游戏刚公测,有很多bug,不知道怎 ...
- ehvierwer登录与不登录_《天涯明月刀手游》pc端手机端登录不进去如何解决 服务器已满快速解决方法...
导读 天涯明月刀这款手游终于公测了,每个玩家都可以在这里创造属于自己的江湖世界,不同的人会有不同的旅程,所以想要拥有一段属于自己江湖旅程就一定不要错过天刀这款手游,不过这款游戏刚公测,有很多bug,不 ...
- 697小说源码PC端+手机端+火车头采集工具
关于安装: 整套源码共计4部分: 1.安装及采集等说明书( 文档教程(小说).doc )2.数据库( 数据库(3000)[backupdata].rar )3.网站程序( 网站程序 ...
- 原生javascript图片惰性延迟加载插件lazyload–兼容PC端手机端
为什么需要页面图片惰性延迟加载? 当页面内图片达到一定的数量,页面的加载速度就越来越差. 我们并不需要把所有图片一次性加载完,而且,用户也不会一次性把所有图片看完. 所以,我们需要做的就是按需加载,只 ...
- css实现背景图PC端/手机端自适应
css代码: @charset "utf-8";*{margin: 0px;padding: 0px;font-family: "Helvetica Neue" ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- 关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...
最新文章
- 用excel表格做好客户关系管理
- Zookeeper集群部署和使用
- 计算机视觉中的数据预处理与模型训练技巧总结
- linux文件测试操作
- Application.DoEvents可能不是线程安全的
- VueRouter基础知识记录1
- 【云周刊】第200期:云栖专辑 | 阿里开发者们的第6个感悟:享受折磨
- java异常处理拦截器
- python 写字机器人_机器人股票:用 Python 自动化办公能做到哪些有趣或有用的事情?作者:陈廷聿...
- 手机号码检测开通微信查询方法
- matlab课程论文2500字,matlab课程论文模板
- Paraview 5.9.0升级为Paraview 5.10.0之后报错
- 未对销售组织 XXX 分销渠道 XX 语言 ZH 定义
- 服务器打开显示选择键盘布局,更改服务器上的TTY键盘布局?
- noi国家集训队论文分类
- 论文阅读:Regularizing Deep Networks with Semantic Data Augmentation
- android9.0 SystemUI锁屏页面固定横屏
- 字符串大小写转换(C/C++实现)
- winRE环境下使用xcopy时显示未找到文件
- java3D实现空间立方体_CSS3 3D旋转立方体
热门文章
- 本题要求编写程序,输出整数152的个位数字、十位数字和百位数字的值。
- SWING中模拟键盘输入例子
- jQuery的promise异步模式
- 2023第5届中国(济南)国际福祉及残疾人用品展览会开启招商
- Android 11 AppOps setOnOpNotedCallback实现分析
- 取消挂载是提示:device is busy
- 二维数组malloc申请空间以及初始化方式
- Windows11、win11、Windows10、win10系统安装
- 博客上怎么根据搜索ID搜索其它人
- 胡瑜 简介中科院计算机所,胡瑜--中科院计算所计算机体系结构国家重点实验室...