响应式网站——第二话(技术实现)

最新推荐文章于 2022-10-26 19:24:10 发布
最新推荐文章于 2022-10-26 19:24:10 发布
阅读量300 收藏
点赞数
原文链接：https://juejin.im/post/5c7f7ef96fb9a049e232c4b2
版权
引言

通过上一篇我们了解了响应式的意义和实现种类，这篇讲解具体的技术

通过四大类讲解
  • 媒体查询
  • 弹性布局 和 网格布局
  • em rem 布局
  • 弹性图片(容易被忽视)

在此打个补丁，弹性布局 和 网格布局暂且不做介绍，想了解的百度flex 和 grid即可，日后会不断完善的

写在前面

因为不同浏览器厂商标准不一样，所以会出现同样代码在不同浏览器的表现不同，也因此有了很多聪(tou)明(lan)的解决方式。等待你随着技术积累慢慢发现，先说一个消除浏览器默认样式差异的基础样式文件normalize.css，下载地址：necolas.github.io/normalize.c…。页面加载时最先加载此文件，放在<head>中其他.css文件前面

第一大类——媒体查询

媒体查询 媒体查询并不是css3才有的概念，在css2的时候它长这样：

<link rel="stylesheet" type="text/css" href="font.css" media="screen"/>
复制代码

media="screen"意味着只有用屏幕浏览才能加载样式文件，到了css3发展成了这样

@media screen and (min-width:800px) {
    <!--css代码-->
}
复制代码

media从此变得重要了

  • 逻辑符有如下四个not and only or，看着单词就知道咋用，不会就去百度
  • 属性常用有这些，width height device-width divice-height ，这些都可以加min max前缀，前面例子中使用了min-width，此外还有宽高比，颜色位数，分辨率等属性。

未完待续，服务器出问题了，先不更了

weixin_34381687
关注
vue2数据响应式原理——数据劫持（数组篇）
前端之行，任重道远！
05-16 6619
vue2数据响应式原理之数据劫持（数组篇）前言数据劫持（数组篇）array.jsObserver.js 前言 通过前两篇的学习，想必你已经对Object.defineProperty()和对象的侦听有了一定的理解，现在就让我们来继续研究如何使用Object.defineProperty()来对数组进行数据劫持，以便我们能够侦听到数组的变化。 数据劫持（数组篇） 首先新建一个： array.js import { def } from "./utils.js"; //获取数组的原型 const arrayP.
vue2数据响应式原理——依赖收集和发布订阅
前端之行，任重道远！
05-16 7253
vue2数据响应式原理之依赖收集和发布订阅前言收集依赖，发布订阅依赖是谁？什么是Watcher？Watcher.jsDep.jsObserver.jsdefineReactive.js 前言 前几篇我们已经研究过了数据劫持，并多次提到依赖这个词，这一篇我们就将针对依赖来进行深入探讨：什么是依赖，以及收集依赖和发布订阅。 收集依赖，发布订阅 依赖是谁？ 需要用到数据的地方成为依赖！ 前面说了在getter中收集依赖，在setter中触发依赖。 那依赖是谁呢？我们需要在访问数据时收集谁，更新数据时触发谁呢？.
web一阶段 day27
gaoyuan0277的博客
08-16 451
响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。
响应式网页设计中的常用技术
06-23 1554
在以前的文章中，我谈到了为什么网络是准备响应式设计 ，以及如何网站所有者可以利用用户的设备和屏幕房地产的情况下提供上下文相关经验的用户在各种尺寸，包括PC的屏幕，手机和控制台。 在这篇文章中，我将深入到一些最常见的做法来制作响应站点布局和经验。 我会形容为灵活地调整图的基础上的屏幕房地产网站布局新兴和现有技术（简称“流体网格”），以确保用户跨无论屏幕尺寸他们正在使用得到完整的经验。 此外，我将...
响应式网站实现原理
小王的技术博客
08-24 359
一、媒体查询 媒体查询可以让我们根据显示器的特性为其设置不同的css样式，媒体查询是由媒体类型和一个或者多个检测媒体的表达式组成，媒体检测的媒体特性可以是width 、height 和color等，使用媒体查询可以在不改变页面的情况下，为特定的一些设备定制出不同的效果。 媒体查询的方式 实际操作：对媒体提出询问（表达式）开始，如果表达式结果为真（符合条件），媒体查询中的css被应用，如果表达...
响应式网站
Dear_Mr的博客
05-06 1987
一、响应式网站概念响应式网站是一个设计理念，它是多项技术的综合体flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询二、响应式网站的优点与缺点 优点 （1）减少工作量 网站、设计、代码、内容都只需要一份 多出来的工作量只是JS、CSS样式的修改 （2）节省时间（3）每个设备都能得到正确的设计（4）搜索优化 缺点 （1）会加载
响应式网页设计_响应式网页设计中的常用技术
06-23 792
响应式网页设计 在先前的文章中，我讨论了为什么Web准备就绪以进行响应式设计 ，以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕（包括PC，电话） 为用户提供上下文相关的体验。和控制台。 在本文中，我将介绍一些用于构建响应式站点布局和体验的最常见的实践。 我将介绍新兴的和可用的网站布局技术，这些技术可以根据屏幕空间灵活地调整大小（称为“流体网格”），以确保用户在使用的任何屏幕...
响应式技术
最新发布
QQQqq031110的博客
10-26 177
也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。
Android响应式编程——RxJava3框架的使用（一）
weixin_42046829的博客
03-13 5241
1.简介 RxJava是响应式编程(Reactive Extensions)在JVM平台上的实现，即用Java语言实现的一套基于观察者模式的异步编程接口。 1.1 RxJava简述 RxJava是一个在Java虚拟机上，使用可观察的序列构成基于事件的，异步的程序库。 1.2 RxAndroid简述 RxAndroid是基于RxJava开发出的一套适用于Android开发的辅助库。 1.3 设计模式...
Android响应式编程——RxJava3框架的使用（二）
weixin_42046829的博客
03-13 4041
Android响应式编程——RxJava3框架的使用（二）RxJava常用操作符1.创建操作符1.1 create1.2 from1.3 just1.4 defer1.5 range1.6 interval1.7 repeat1.8 timer2.转换操作符2.1 map2.2 flatMap/concatMap2.3 scan2.4 groupBy2.5 buffer2.6 window3.过滤...
（1）什么是响应式编程——响应式Spring的道法术器
热门推荐
刘康的专栏
03-06 4万+
本系列其他文章见：《响应式Spring的道法术器》。 响应式编程之道 1.1 什么是响应式编程？ 在开始讨论响应式编程（Reactive Programming）之前，先来看一个我们经常使用的一款堪称“响应式典范”的强大的生产力工具——电子表格。 举个简单的例子，某电商网站正在搞促销活动，任何单品都可以参加“满199减40”的活动，而且“满500包邮”。吃货小明有选择障碍（当然...
HTML5响应式（自适应）网页设计的实现
09-27
本篇文章主要介绍了HTML5响应式（自适应）网页设计的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
响应式网页设计_响应式网页设计–未来技术？
08-06 205
响应式网页设计Well, when anything changes we must acclimatize to that change, and this can sometimes hit your pocket hard. Why don’t these developers develop a fortified solution to this problem? Well yes! T...
响应式页面
lv_suri的博客
07-14 1009
同一套静态页面代码，在不同的设备中展现出不同的效果，并且可以自适应
响应式网站开发
huangzhi_的博客
08-10 726
响应式网站开发 一、响应式网站开发的形式 在一个网站完成不同设备的适配（PC端、平板端、手机端），一般用于企业完网站较多。 通过2个或多个网站完成适配，一般用于大型网站、商城。 二、响应式网站开发的技术 使用原生方式进行编写 @media Bootstrap框架 三、原生方式进行编写 /*当宽度为0-768px时显示的样式，移动端*/ @media(max-width:768px){} /*当宽度大于768px 小于992px时显示的样式，平板端*/ @media(min-width:768px){
什么是响应式网页？
04-13 443
进入移动互联网时代，各种不同的移动智能设备层出不穷，比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果，截至2017年6月，我国网民规模达到7.51亿，其中手机网民达7.24亿，占比达96.3%，较2016年底增长了1.2个百分点，与此同时，使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中，移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的，而且即使是同一个设备，当用
响应式设计技术概览
qq_42062727的博客
07-25 1810
什么是响应式开发 在移动互联网日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前，通常的做法是对移动端单独开发一套特定的版本，但是，如果移动端设备越来越多的时候开发成本会比较大，因为需要做所有屏幕的适配。 响应式开发的目的就是：一个网站能兼容多种终端。实现不同屏幕分辨率的终端上浏览网页时有不同的展示方式，通过响应式设计能使网站在不同终端上有更好的浏览阅读体验。 响应式开发的技术 媒体查询（@media）； bootstrap； CSS 单位（rem、vh、vw、e
响应式编程实现技术概述
天涯兰的博客
09-27 1344
响应式编程就是利用异步数据流进行编程，本质上就是观察者（Observer）模式的一种表现形式。我们首先讨论实现异步操作的几种常见方式，然后引出响应式编程的主流实现技术。 1. 实现异步的常见方式 在Java中，为了实现异步非阻塞，一般会采用回调（Callback）和Future这两种机制，但这两种机制都存在一定局限性。 （1）回调 回调的含义如下图所示，即类A的methodA()方法调用类...
齿轮齿条副位移转换原理及应用——数字式位置传感器
"本资源是关于自动检测技术及应用（第2版）课件中的第十一章——数字式位置传感器，特别关注齿轮-齿条副的位移转换演示。" 在自动化技术和精密测量领域，位置传感器起着至关重要的作用。数字式位置传感器，如角编码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值