php直播网站开发,网站qq联系怎么做,网站底部优化文字,wordpress数据库权限一、媒体查询
1.认识媒体查询
媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。
你可以根据设备的类型#xff08;比如屏幕设备、打印机设备#xff09;或者特定的特性(比如屏幕的宽度)来修改你的页面。
媒体查询的使用方式主要有三种#xff1a;…一、媒体查询
1.认识媒体查询
媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。
你可以根据设备的类型比如屏幕设备、打印机设备或者特定的特性(比如屏幕的宽度)来修改你的页面。
媒体查询的使用方式主要有三种 方式一通过media和import使用不同的CSS规则常用 方式二使用media属性为stylelinksource和其他HTML元素指定特定的媒体类型 方式三使用 Window.matchMedia() 和 MediaQueryList.addListener() 方法来测试和监控媒体状态
比较常用的是通过 media 来使用不同的CSS规则目前掌握这个即可
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 媒体查询方式二使用media属性 --!-- link relstylesheet mediascreen and (max-width: 800px) href./css/body_bgc.css --style/* 媒体查询方式一 使用import *//* import url(./css/body.css) (max-width: 500px); *//stylescript// 媒体查询方式三使用matchMedia函数var mediaQueryList window.matchMedia((max-width: 600px));mediaQueryList.addEventListener(change, function(a, b){if (a.matches) {document.body.style.backgroundColor #ccc;} else {document.body.style.backgroundColor transparent;}})/script
/head
body/body
/html2.媒体查询 - 媒体类型Media types
在使用媒体查询时你必须指定要使用的媒体类型。
媒体类型是可选的并且会隐式地应用 all 类型。
常见的媒体类型值如下
all适用于所有设备。print适用于在打印预览模式下在屏幕上查看的分页材料和文档。screen掌握主要用于屏幕。speech主要用于语音合成器。
被废弃的媒体类型
CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)但是他们在Media Queries 4 中已经被废弃并且不应该被使用aural类型被替换为具有相似效果的speech。
3.媒体查询 – 媒体特性Media features
媒体特性Media features描述了 浏览器、输出设备或是预览环境的具体特征
通常会将媒体特性描述为一个表达式每条媒体特性表达式都必须用括号括起来 4.媒体查询 – 逻辑操作符logical operators
媒体查询的表达式最终会获得一个Boolean值也就是真true或者假false。
如果结果为真true那么就会生效如果结果为假false那么就不会生效
如果有多个条件我们可以通过逻辑操作符联合复杂的媒体查询
andand 操作符用于将多个媒体查询规则组合成单条媒体查询notnot运算符用于否定媒体查询如果不满足这个条件则返回true否则返回false。onlyonly运算符仅在整个查询匹配时才用于应用样式。, (逗号)逗号用于将多个媒体查询合并为一个规则。
比如下面的媒体查询表示屏幕宽度大于500小于700的时候body背景颜色为红色 5.常见的移动端设备 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 320~375之间 font-size: 15px;375~414之间 font-size: 18px;414~480之间 font-size: 21px;大于480px font-size: 24px*//* media (min-width: 320px) and (max-width: 375px) {.box { font-size: 15px; }}media (min-width: 375px) and (max-width: 414px) {.box { font-size: 18px; }}media (min-width: 414px) and (max-width: 480px) {.box { font-size: 21px; }}media (min-width: 480px) {.box { font-size: 24px; }} *//* CSS层叠性 */media (min-width: 320px) {.box { font-size: 15px; }}media (min-width: 375px) {.box { font-size: 18px; }}media (min-width: 414px) {.box { font-size: 21px; }}media (min-width: 480px) {.box { font-size: 24px; }}/style
/head
bodydiv classbox我是box/div/body
/html二、CSS常见单位详解
1.CSS中的单位
前面编写的CSS中我们经常会使用px来表示一个长度大小比如font-size设置为18pxwidth设置为100px。
px 是一个长度length单位事实上CSS中还有非常多的长度单位。
整体可以分成两类 绝对长度单位Absolute length units 相对长度单位Relative length units
2.CSS中的绝对单位 Absolute length units
绝对单位
它们与其他任何东西都没有关系通常被认为总是相同的大小。这些值中的大多数在用于打印时比用于屏幕输出时更有用例如我们通常不会在屏幕上使用cm。唯一一个您经常使用的值就是px (像素)。 3.CSS中的相对单位 Relative length units
相对长度单位
相对长度单位相对于其他一些东西比如父元素的字体大小或者视图端口的大小使用相对单位的好处是经过一些仔细的规划您可以使文本或其他元素的大小与页面上的其他内容相对应 三、深入理解pixel、DPR、PPI
1.pixel是什么
前面我们已经一直在使用px单位了px是pixel单词的缩写翻译为像素。
那么像素到底是什么呢
像素是影响显示的基本单位。比如屏幕上看到的画面、一幅图片pix是英语单词picture的常用简写加上英语单词“元素”element就得到pixel“像素”表示“画像元素”之意有时亦被称为pelpicture element
2.像素的不同分类一
100个pixel到底是多少呢
我们确实可以在屏幕上看到一个大小但是这个大小代表的真实含义是什么呢我们经常说一个电脑的分辨率、手机的分辨率这个CSS当中的像素又是什么关系呢
这里我们要深入到不同的像素概念中来理解CSS中的pixel到底代表什么含义。
像素单位常见的有三种像素名称
设备像素也称之为物理像素设备独立像素也称之为逻辑像素CSS像素
3.物理像素和逻辑像素
设备像素也叫物理像素。
设备像素指的是显示器上的真实像素每个像素的大小是屏幕固有的属性屏幕出厂以后就不会改变了我们在购买显示器或者手机的时候提到的设备分辨率就是设备像素的大小比如iPhone X的分辨率 1125x2436指的就是设备像素
设备独立像素也叫逻辑像素。
如果面向开发者我们使用设备像素显示一个100px的宽度那么在不同屏幕上显示效果会是不同的开发者针对不同的屏幕很难进行较好的适配编写程序必须了解用户的分辨率来进行开发所以在设备像素之上操作系统为开发者进行抽象提供了逻辑像素的概念比如你购买了一台显示器在操作系统上是以1920x1080设置的显示分辨率那么无论你购买的是2k、4k的显示器对于开发者来说都是 1920x1080的大小。
CSS像素
CSS中我们经常使用的单位也是 pixel它在默认情况下等同于设备独立像素也就是逻辑像素毕竟逻辑像素才是面向我们开发者的
我们可以通过 JavaScript 中的screen.width和screen.height获取到电脑的逻辑分辨率
4.DPR、PPI
DPRdevice pixel ratio
2010年iPhone4问世不仅仅带来了移动互联网还带来了Retina屏幕Retina屏幕翻译为视网膜显示屏可以为用户带来更好的显示在Retina屏幕中一个逻辑像素在长度上对应两个物理像素这个比例称之为设备像素比device pixel ratio我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值 PPI了解每英寸像素英语Pixels Per Inch缩写PPI
通常用来表示一个打印图像或者显示器上像素的密度前面我们提过1英寸2.54厘米在工业领域被广泛应用
五、浏览器视口Viewport
1.什么是移动端适配
移动互联网的快速发展让人们已经越来越习惯于使用手机来完成大部分日常的事务。
前端我们已经学习了大量HTML、CSS的前端开发知识并且也进行了项目实战这些知识也同样适用于移动端开发但是如果想让一个页面真正适配于移动端我们最好多了解一些移动端的知识
移动端开发目前主要包括三类
原生App开发iOS、Android、RN、uniapp、Flutter等小程序开发原生小程序、uniapp、Taro等Web页面移动端的Web页面可以使用浏览器或者webview浏览
因为目前移动端设备较多所以我们需要对其进行一些适配。 这里有两个概念
自适应根据不同的设备屏幕大小来自动调整尺寸、大小响应式会随着屏幕的实时变动而自动调整是一种自适应
2.认识视口viewport
在前面我们已经简单了解过视口的概念了
在一个浏览器中我们可以看到的区域就是视口viewport我们说过 fixed 就是相对于视口来进行定位的在PC端的页面中我们是不需要对视口进行区分因为我们的布局视口和视觉视口是同一个
但是在移动端不太一样你布局的视口和你可见的视口是不太一样的。
这是因为移动端的网页窗口往往比较小我们可能会希望一个大的网页在移动端可以完整的显示所以在默认情况下移动端的布局视口是大于视觉视口的
所以在移动端我们可以将视口划分为三种情况
布局视口layout viewport视觉视口visual layout理想视口ideal layout
这些概念的区分事实上来自ppk他也是对前端贡献比较大的一个人特别是在移动端浏览器
https://www.quirksmode.org/mobile/viewports2.html 3.布局视口和视觉视口
3.1布局视口layout viewport
默认情况下一个在PC端的网页在移动端会如何显示呢
第一它会按照宽度为980px来布局一个页面的盒子和内容第二为了显示可以完整的显示在页面中对整个页面进行缩小
我们相对于980px布局的这个视口称之为布局视口layout viewport
布局视口的默认宽度是980px
3.2视觉视口visual viewport
如果默认情况下我们按照980px显示内容那么右侧有一部分区域 就会无法显示所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中那么显示在可见区域的这个视口就是视觉视口visual viewport
在Chrome上按shift鼠标左键可以进行缩放。 4.理想视口ideal viewport
如果所有的网页都按照980px在移动端布局那么最终页面都会被缩放显示。
事实上这种方式是不利于我们进行移动的开发的我们希望的是设置100px那么显示的就是100px如何做到这一点呢通过设置理想视口ideal viewport
理想视口ideal viewport
默认情况下的layout viewport并不适合我们进行布局我们可以对 layout viewport 进行宽度和缩放的设置以满足正常在一个移动端窗口的布局这个时候可以设置meta中的viewport 六、移动端适配
1.移动端适配方案
移动端的屏幕尺寸通常是非常繁多的很多时候我们希望在不同的屏幕尺寸上显示不同的大小
比如我们设置一个100x100的盒子 在375px的屏幕上显示是100 x 100;在320px的屏幕上显示是90 x 90;在414px的屏幕上显示是100 x 100; 其他尺寸也是类似比如padding、margin、border、left甚至是font-size等等
这个时候我们可能可以想到一些方案来处理尺寸
方案一百分比设置 因为不同属性的百分比值相对的可能是不同参照物所以百分比往往很难统一所以百分比在移动端适配中使用是非常少的 方案二rem单位动态html的font-size方案三vw单位方案四flex的弹性布局
2.适配方案 – rem动态html的font-size
rem单位是相对于html元素的font-size来设置的那么如果我们需要在不同的屏幕下有不同的尺寸可以动态的修改html的 font-size 尺寸。
比如如下案例
1.设置一个盒子的宽度是 2rem2.设置不同的屏幕上html的font-size不同 这样在开发中我们只需要考虑两个问题
问题一针对不同的屏幕设置html不同的font-size问题二将原来要设置的尺寸转化成rem单位
2.1 rem的font-size尺寸
方案一媒体查询
可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸缺点 1.我们需要针对不同的屏幕编写大量的媒体查询2.如果动态改变尺寸不会实时的进行更新
方案二编写js代码
如果希望实时改变屏幕尺寸时font-size也可以实时更改可以通过js代码方法 1.根据html的宽度计算出font-size的大小并且设置到html上2.监听页面的实时改变并且重新设置font-size的大小到html上
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {margin: 0;padding: 0;}.box {width: 6.25rem;height: 6.25rem;background-color: #ccc;}/style
/head
bodydiv classbox吃饭睡觉阿斗都/divscriptvar htmlEl document.documentElement;function setRemUnit() {var htmlFontSize htmlEl.clientWidth / 46.875;htmlEl.style.fontSize htmlFontSize px;console.log(htmlFontSize);}setRemUnit();window.addEventListener(resize, function () {setRemUnit();})/script
/body
/html方案三lib-flexible 库
事实上lib-flexible库做的事情是相同的你也可以直接引入它
2.2 rem的单位换算
方案一手动换算
比如有一个在375px屏幕上100px宽度和高度的盒子我们需要将100px转成对应的rem值100/37.52.6667其他也是相同的方法计算即可
方案二less/scss函数 方案三postcss-pxtorem后续学习
目前在前端的工程化开发中我们可以借助于webpack的工具来完成自动的转化
方案四VSCode插件
px to rem 的插件在编写时自动转化
3.适配方案 - vw
在flexible GitHub上已经有写过这样的一句话 由于viewport单位得到众多浏览器的兼容lib-flexible这个过渡方案已经可以放弃使用不管是现在的版本还是以前的版本都存有一定的问题。建议大家开始使用viewport来替代此方。 所以它更推荐使用viewport的两个单位vw、vh 。
vw的兼容性如何呢 4.vw 和 rem 的对比
rem事实上是作为一种过渡的方案它利用的也是vw的思想。
前面不管是我们自己编写的js还是flexible的源码都是将1rem等同于设计稿的1/10在利用1rem计算相对于整个屏幕的尺寸大小那么我们来思考1vw不是刚好等于屏幕的1/100吗而且相对于rem还更加有优势
vw相比于rem的优势
优势一不需要去计算html的font-size大小也不需要给html设置这样一个font-size优势二不会因为设置html的font-size大小而必须给body再设置一个font-size防止继承优势三因为不依赖font-size的尺寸所以不用担心某些原因html的font-size尺寸被篡改页面尺寸混乱优势四vw相比于rem更加语义化1vw刚才是1/100的viewport的大小;优势五可以具备rem之前所有的优点
vw 我们只面临一个问题将尺寸换算成vw的单位即可
所以目前相比于rem更加推荐大家使用 vw但是理解rem依然很重要
5.vw的单位换算
方案一手动换算 比如有一个在375px屏幕上100px宽度和高度的盒子 我们需要将100px转成对应的vw值 100/3.7526.667其他也是相同的方法计算即可
方案二less/scss函数 方案三postcss-px-to-viewport-8-plugin后续学习
和rem一样在前端的工程化开发中我们可以借助于webpack的工具来完成自动的转化
方案四VSCode插件
px to vw 的插件在编写时自动转化
