Java教程

0_9 移动端、媒体查询、响应式布局

本文主要是介绍0_9 移动端、媒体查询、响应式布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1、像素和视口

1.1  像素:

  物理像素:分辨率数

  css像素:编写网页时,所用都是css像素

  浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现 , 一个css像素最终由几个              物理像素显示,由浏览器决定:    默认情况下在pc端,一个css像素 = 一个物理像素  

1.2 视口

屏幕中用来显示网页的区域 我们可以通过改变视口的大小,来改变CSS像素和物理像素的比值   默认情况下:         视口宽度 1920px(CSS像素)                         1920px(物理像素)                         - 此时,css像素和物理像素的比是 1:1  放大两倍的情况:          视口宽度 960px(CSS像素)                         1920px(物理像素)                         - 此时,css像素和物理像素的比是1:2    

2、移动端页面

每一款移动设备设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值即可得到一个最佳效果,将像素比设置为最佳像素比的视口大小我们称其为完美视口                 将网页的视口设置为完美视口                 <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适配.html

3、响应式布局

网页可以根据不同的设备或者窗口大小,呈现不同的效果,可以使一个网页适用于所有设备 关键:媒体查询  通过媒体查询,可以为不通的设备,或设备不同状态来分别设置样式  

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 }

 

     

 

这篇关于0_9 移动端、媒体查询、响应式布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!