-
2021-04-01 17:06:39
web端和移动端样式自适应（媒体查询响应式布局）
在遇到需要适应多端情况是，可以选择使用媒体查询响应式布局，简单好用
首先适应最小机型，例如你要在最小机型的某一个div加上边框 那么如下写法 再把机型切换小 就可以看到效果了@media screen and (max-width:360px){ .rule{ border: 1px solid #FF5A5A; } }这里是适应比如ipad这种宽度机型的，同上也是切换机型就可以看到效果
@media screen and (max-width:768px){ .rule{ border: 1px solid #FF5A5A; } }这里就是适应web端大小了
@media screen and (min-width:768px) { .rule{ border: 1px solid #FF5A5A; } }使用媒体查询简单易上手
更多相关内容 -
css基于媒体查询和 rem 的响应式布局实践
2020-09-22 11:53:08主要介绍了css基于媒体查询和 rem 的响应式布局实践的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
CSS3弹性盒和媒体查询响应式布局
2019-08-13 02:43:531、怪异盒模型的简介 2、弹性盒模型和相关概念 3、Flex容器属性(添加在父级元素上的) ...4、Flex项目属性(添加在子元素上的) ...6、Responsive web design 响应式设计布局概念 7、CSS3多列布局 -
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2021-01-18 16:17:12媒体设备类型使用详解： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <meta name=viewport content=width=device-width,minimum... -
使用CSS媒体查询创建响应式布局教程
2020-09-24 22:56:59下面小编就为大家带来一篇使用CSS媒体查询创建响应式布局教程。小编觉得挺不错的，现在分享给大家，也给大家个参考。一起跟随小编过来看看吧 -
媒体查询&响应式布局
2021-07-29 11:39:45(min/max) device-height: (min/max) 关键字 and and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。 not not运算符...展开全文<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 媒体特性： width 视口(窗口)的宽度 height 视口(窗口)的高度 min-width 视口的最小宽度（视口大于指定宽度时生效） max-width 视口的最大宽度（视口小于指定宽度时生效） */ /* 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化 一般比较常用的断点 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px */ @media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } } </style> </head> <body> </body> </html>媒体类型 all 所有媒体 print 打印 screen 屏幕设备 braille 盲文触觉设备 embossed 盲文打印机 speech “听觉”类似的媒体设备 tty 不适用像素的设备 tv 电视 媒体特性 min-width：窗口宽度大于设置值的时候识别 max-width：窗口宽度小于设置值的时候识别 orientation：portrait ：竖屏 orientation：landscape：横屏 -webkit-device-pixel-ratio：像素比 device-width: 设备独立像素 (min/max) device-height: (min/max) 关键字 and and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。 not not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。 注意：在Level 3中，not关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。 only only运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用only运算符，则还必须指定媒体类型。 , (逗号) 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或or运算符。/*width:浏览器窗口的尺寸（min max）
* min-width:800px >=800px
* max-width:800px <=800px
*
*device-width:设备独立像素（min max）
* pc端：分辨率
* 移动端：具体看机器的参数
*
* device-pixel-ratio（必须加-webkit-前缀），（min max）
* pc端：1
* 移动端：具体看机器的参数
*
*
* */
-
用媒体查询实现响应式布局
2022-04-14 15:17:48所有设备使用媒体查询可以用@media all @media空格and空格（你想要加的条件）{元素{属性：值;}} 常见的条件有max-width表示小于等于这个宽度的时候做什么 min-width表示大于等于这个宽度的时候做什么 条件是可以...展开全文@media空格设备类型 {元素{属性：值;}}
screen表示电子屏幕
print表示打印机屏幕
所有设备使用媒体查询可以用@media all@media空格and空格（你想要加的条件）{元素{属性：值;}}
常见的条件有max-width表示小于等于这个宽度的时候做什么
min-width表示大于等于这个宽度的时候做什么条件是可以叠加的哇，记住and的左右都有空格哦
设置color颜色时要注意，颜色是可以被body里面的子元素继承的
但是如果子元素有自己的颜色，就会使用自己的颜色如果写了两条响应式但是条件相反，谁在下面谁算数
----------------------------------------------------------------------------------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta ：vp 理想、标准视口 content=显示的宽度为设备的宽度，是否对屏幕的尺寸进行缩放，1.0表示不缩放
在移动端这个语句很重要哦
使用物理单位px在不同宽度和不同分辨率的手机上会有一定的差异，为了避免我们会使用em或rem做为移动端的单位，但是em相对父元素大小显示，所以还是rem经常做为移动端的单位
不同浏览器根元素的默认大小大小不一致，所以我们要手动设置
假如手动设置html的font-size为10px，那么接下来写的1rem就是10px了
我们做的效果在不同的屏幕尺寸当中有不同样式
浏览器有默认最小尺寸就算你设置的比它低显示的还是浏览器最小的大小
<link rel="stylesheet" href="./1.css"> 后面可以设置media=“screen and （max-width：600px）：当屏幕小于600添加这些样式”
screen前面可以加only ：仅在电脑屏幕或移动设备下，其他设备屏幕无效
使用的环境是：不同的屏幕需要显示不同的样式Css需要写很多的情况下可以这么写就可以调用多套样式了———————————————————————————————————————————
小练习~
需求说明 通过 flex 布局，完成导航栏目布局效果 通过 flex 实现垂直居中,具体效果如下：
页面宽度大于 600px 小于 800px 的时候，容器属性变为justify-content: space-around，显示效果如下：
页面宽度宽度小于 600px 的时候自动换行，显示效果如下
拯救世界什么的还不如睡觉呢
呼呼
-
一步一步实现Vue的响应式(对象观测)
2020-12-12 19:54:46平时开发中，Vue的响应式系统让我们不再去操作DOM，只需关心数据逻辑的处理，极大地降低了代码的复杂度。而响应式系统也是Vue的核心，作为开发者有必要了解其实现原理！ 简易版 以watch为切入点 watch是平时开发中... -
响应式布局——媒体查询
2022-04-05 14:37:47什么是响应式布局？同一行代码，适配不同的屏幕 一、媒体查询 1.1 基本语法 目标：能够根据设备宽度的变化，设置差异化样式 开发常用写法 媒体特性常用写法 max-width（小于等于） min-width（大于等于） ...展开全文什么是响应式布局？同一行代码，适配不同的屏幕
一、媒体查询
1.1 基本语法
目标：能够根据设备宽度的变化，设置差异化样式
开发常用写法
- 媒体特性常用写法
- max-width（小于等于）
- min-width（大于等于）
@media (媒体特性) { 选择器{ 样式 } }
1.2 书写顺序
- min-width（从小到大）
- max-width（从大到小）
1.3 （了解）完整写法
@media 关键词 媒体类型 and (媒体特性) { CSS代码 }1.3.1 关键词
- and
- only
- not
1.3.2 媒体类型
- 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
类型名称 值 描述 屏幕 screen 带屏幕的设备 打印预览 print 打印预览模式 阅读器 speech 屏幕阅读模式 不区分类型 all 默认值，包括以上三种情况 1.3.3 媒体特征
- 媒体特征主要用来藐视媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等
特性名称 属性 值 视口的宽或高 width、height 数值 视口最大宽或高 max-width、max-height 数值 视口最小宽或高 min-width、min-width 数值 屏幕方向 orientation portrait：竖屏
landscape：横屏
1.3.4 link写法
-
外链式CSS引入
<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">
1.3.5 隐藏
<style> * { margin: 0; padding: 0; } .box { display: flex; width: 100%; } .left { width: 300px; min-height: 500px; background-color: pink; } .main { /* 除去左边侧边栏的300px，父元素剩余的宽度都给main，此时main实现了响应式功能，可以任意改变宽度 */ flex: 1; min-height: 500px; background-color: skyblue; } /* 可是当屏幕小到一定程度之后，已经是手机端的大小了，main部分的宽度已经很小了，手机端也不需要侧边栏，所以要把侧边栏left隐藏 */ /* 屏幕宽度小于768px的时候，被认为是手机端，隐藏侧边栏 */ @media (max-width: 768px) { .left { display: none; } } </style> <body> <div class="box"> <div class="left">left</div> <div class="main"> 响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果 </div> </div> </body>
- 媒体特性常用写法
-
媒体查询和响应式布局
2021-05-08 18:06:022 媒体查询和响应式布局 2.1 视口 viewport ① 什么是视口 视口就是浏览器显示网页的可视区域。 视口是网页的初始包含块，视口是根元素的包含块。 ② 移动端视口和PC端视口 PC端浏览器： 视口大小可以调整（通过... -
响应式布局--媒体查询
2021-12-07 12:40:28响应式布局，简而言之，就是一个网站能够兼容多个终端—而不是每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提供更加舒适的界面和更好的用户体验。 优缺点 优点 面对不同... -
媒体查询-响应式布局-BFC
2021-05-03 12:56:04媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局 设置给包裹元素的属性： column-count column-width columns column-gap column-rule-width column-rule-color column-rule-style column-rule 设置给子元素... -
css3利用媒体查询实现响应式布局
2021-08-17 15:22:158.17测试问题：如何实现响应式布局？ 第一眼看到题目一脸迷茫，说起布局，最熟悉的莫过于三大布局：浮动布局、定位布局、弹性布局，说起响应式布局、属实是了解不到位，胡乱将三类布局做了阐述堆写在了答案区....... -
媒体查询与响应式布局
2021-08-02 19:25:18一、媒体查询 语法：@media mediatype and/not/only (mediafeature){ css-type } meidatype 媒体类型： 值--->all 用于所有设备---常用、print 用于打印机和打印预览、screen 用于电脑屏幕 平板电脑 智能手机... -
前端笔记：媒体查询和响应式布局
2020-12-07 17:42:51文章目录 目的 媒体查询 响应式布局 总结 目的 CSS中有一个叫做媒体查询（Media queries）的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。常见的响应式... -
十六、响应式布局--媒体查询
2021-05-31 15:00:13响应式布局的关键就是媒体查询 4.通过媒体查询可以为不同的设备、设备的 不同状态来分别设置样式。 1.2 响应式布局和移动端网页的区别 响应式布局和移动端网页的区别： 1、响应式布局可以... -
媒体查询、移动端、网页响应式布局
2022-04-14 22:24:231.媒体查询 随着移动设备与互联网的快速普及，用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。媒体查询能让 CSS 可以更... -
移动端响应式布局--媒体查询
2021-12-02 18:39:39概念：一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局，使用媒体查询针对不同设备宽度进行布局设置。 优点：一站适配所有终端，减少工作量，缩短开发周期。对搜索引擎友好，在每个设备中都能得到... -
响应式布局 媒体查询
2017-10-18 13:43:15响应式布局的核心是媒体查询。媒体查询（media query）是获取用户行为和设备环境、然后提供相应的css规则的过程的简称。媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。CSS 语法@me... -
响应式布局：rem + 媒体查询
2021-06-04 19:27:401.rem单位 rem与em的区别： ...em是一个相对单位，相对于...2. 媒体查询 上面我们知道在不同屏幕大小情况下，可以通过控制html的字体大小来控制页面样式，那么我们如何根据不同屏幕的大小来控制html字体的大小呢？ 媒体查 -
CSS3 媒体查询（响应式布局）
2022-04-14 15:40:54一、媒体查询 媒体特性： width 视口(窗口)的宽度 height 视口(窗口)的高度 min-width 视口的最小宽度（视口大于等于指定宽度时生效） max-width 视口的最大宽度（视口小于等于指定宽度时生效） 语法： @... -
媒体查询，响应式布局设计
2021-04-03 13:50:04一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型 在CSS2中，... -
css媒体查询media ，完成响应式布局
2020-08-09 18:30:09利用媒体查询设置不同屏幕的尺寸，来实现不同屏幕布局元素的样式展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=... -
@media 媒体查询，响应式布局
2019-10-01 00:44:00近期，需要做响应式布局，话说，好久没做过响应式了，回顾一下 定义和使用 使用 @media 媒体查询，主要针对不同的媒体类型定义不同的样式。根据不同的屏幕尺寸来设置不同的样式，实现响应式布局。。。 用法 1）... -
媒体查询之响应式布局一
2020-04-28 22:03:04媒体查询 媒体查询： 根据设备的宽度（浏览器的宽度）来显示不同的css样式。... } } 方法2： 响应式布局一： 根据媒体查询，判断视口的大小，来改变div的显示多少。 HTML 笑意 笑意 笑意 笑意 ........ CSS -
CSS3之媒体查询（响应式布局）
2018-09-02 12:58:25为啥有媒体查询： 移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。 Web设计人员的挑战是确保他们的网站不仅... -
响应式布局的介绍+媒体查询
2020-10-27 12:55:05文章目录响应式布局的介绍什么是响应式布局响应式开发的现状响应式开发与pc+移动开发的比较-------------------响应式开发的屏幕分类设备屏幕的分类媒体查询如果需要在600~800之间样式生效，怎么写？？使用媒体查询... -
前端响应式布局不要用媒体查询了！！！
2021-09-27 17:57:57也不用转化rem和px什么的，连css命名都省了 tailwindcss
收藏数
19,929
精华内容
7,971