标签：视口 查询 width 像素 响应 宽度 vw 移动 css
1、像素和视口
1.1 像素：
物理像素：分辨率数
css像素：编写网页时，所用都是css像素
浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现 ， 一个css像素最终由几个 物理像素显示，由浏览器决定： 默认情况下在pc端，一个css像素 = 一个物理像素1.2 视口
屏幕中用来显示网页的区域 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值 默认情况下： 视口宽度 1920px（CSS像素） 1920px（物理像素） - 此时，css像素和物理像素的比是 1:1 放大两倍的情况： 视口宽度 960px（CSS像素） 1920px（物理像素） - 此时，css像素和物理像素的比是1:22、移动端页面
每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口 将网页的视口设置为完美视口 <meta name="viewport" content="width=device-width, initial-scale=1.0">2.1移动端开发注意事项
在移动端开发时，就不能再使用px来进行布局了 vw 表示的是视口的宽度（viewport width） - 100vw = 一个视口的宽度 - 1vw = 1%视口宽度 vw这个单位永远相当于视口宽度进行计算 设计图的宽度 750px 1125px 设计图 750px 使用vw作为单位 100vw 创建一个 48px x 35px 大小的元素 100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px 6.4vw = 48px(设计图像素) 4.667vw = 35px vm适配的问题10_flex\09.vw适配.html3、响应式布局
网页可以根据不同的设备或者窗口大小，呈现不同的效果，可以使一个网页适用于所有设备 关键：媒体查询 通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式4、媒体查询
语法： @media 查询规则{ } 媒体类型： all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系 可以在媒体类型前添加一个only，表示只有。 only的使用主要是为了兼容一些老版本浏览器 媒体特性： width 视口的宽度 height 视口的高度 min-width 视口的最小宽度（视口大于指定宽度时生效） max-width 视口的最大宽度（视口小于指定宽度时生效） 如：1 @media only screen and (min-width: 500px) and (max-width:700px){
2 body{
3 background-color: #bfa;
4 }
5 }
标签：视口,查询,width,像素,响应,宽度,vw,移动,css 来源： https://www.cnblogs.com/tybm/p/15962721.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。