flex布局父元素属性flex-direction：元素排列方向row从左到右（默认） row-reverse从右到左 column(从上到下） column-reverse如果父元素不设置高度，会有子元素的高度把他撑起来如果给父元素设置了display：flex，并且宽度小于子元素总体宽度的和，自动对子元素进行压缩
如果想让他换行：flex-wrapflex-wrap：元素换行nowrap：默认
.container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } /*sm*/ @media (min-width: 576px) { .contai
原创
2022-06-05 19:49:16
650阅读
CSS 布局终极指南：Flex、Grid 与响应式设计
移动端页面开发流程 移动端页面布局 一、移动端app分类 1、Native App原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C 2、Hybrid App 混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机 Read More
转载
2018-12-17 14:32:00
595阅读
2评论
什么是数据响应？数据响应式是 vue 实现 UI的核心原理，当用户改变数据 data ，UI 自动更新。如何实现vue2.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。更新 UI。Vue 中解释：当你把一个普通的 JavaScript 对象传入 Vu
转载
2024-09-12 16:25:58
58阅读
想要做一个响应式网站，要么就是找网站建设公司，要么就是自建站。对于响应式网站的设计、制作、搭建怎么样自己完成呢？最简单粗暴的方法就是通过代码编程来完成，但是那些不懂代码，又想自己建设响应式网站的个人或者企业来讲，是不是不懂代码就没有办法制作一个响应式网站了？面对这建站公司建设响应式网站的高额费用，让许多人对响应式网站失去了念头。看着响应式网站强大的功能，但是因为费用问题，只能选择放弃。那不懂代码、
转载
2024-10-05 11:09:22
50阅读
什么是响应式设计？是什么？一句通俗易解得话就可以概括，所谓响应式设计就是可以让你设计的网页不仅仅在PC端显示，还可以在智能机以及iPad平板等移动设备上显示，应用了响应式设计的网页可以随着分辨率的大小进行样式变化，但是响应式设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式现在响应式设计已经应用的越来越广，学前端的我们不能不去掌握响应式设计，像美国白宫就对其
1.必须引入标签： 设置 meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 在设置视口时需要注意，视口就是网页可见区域的尺寸， ...
转载
2021-10-10 10:12:00
235阅读
2评论
CSS 响应式设计（Responsive Design）是一种使网页在不同设备和屏幕尺寸上都能良好显示的方法。以下是实现响应式设计的基本技术和最佳实践。1. 媒体查询媒体查询是实现响应式设计的核心工具。它允许你根据不同的设备特性（如宽度、高度、分辨率等）应用不同的样式。基本语法@media only screen and (max-width: 600px) {
body {
back
原创
精选
2024-06-17 09:55:29
496阅读
响应式编程不同于我们熟悉的命令式编程，我们熟悉的命令式编程即代码就是一行接一行的指令，按照它们的顺序一次一条地出现。一个任务被执行，程序就需要等到它执行完了，才能执行下一个任务。每一步，数据都需要完全获取到了才能被处理，因此它需要作为一个整体来处理。但是所谓的响应式编程**是函数式和声明式的。响应式流处理数据时只要数据是可用的就进行处理，而不是需要将数据作为一个
转载
2024-05-17 15:46:51
145阅读
响应式布局就是在任何情况下，页面布局效果都不会发生变化，他会根据用户的电脑屏幕，尺寸大小来改变自身的布局。 浏览器窗口，VH和VW，VH 的计算方法就是，将窗口的大小分为100份，vh 的计算方法和 vh 是一样的，一个是计算高，一个是计算宽。 弹性盒子，弹性盒子是CSS3的一种新布局模式，代替浮动
原创
2022-06-24 00:22:40
479阅读
方案:
REM、VW、REM + VWlib-flexiblepostcss-plugin-px2rem -Dmain.js
import 'lib-flexible/flexible.js'vue.config.js:css: {
loaderOptions: {
postcss: {
plugins: [
requrie('postcss-plugin-
原创
2023-10-06 10:09:02
118阅读
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 flex布局当使用flex布局的时候涉及到两个东西，容器container和项目itemscontainer：父元素为container，通过
转载
2024-06-11 21:10:35
224阅读
数据响应式的核心原理Vue 2.xVue 2.x深入响应式原理MDN - Object.defineProperty浏览器兼容 IE8 以上（不兼容 IE8）// 模拟 Vue 中的 data 选项
let data = {
msg: 'hello'
}
// 模拟 Vue 的实例
let vm = {}
// 数据劫持：当访问或者设置 vm
# Java 响应式编程入门 Demo
近年来，响应式编程（Reactive Programming）在现代软件开发中变得日益重要，尤其在处理异步数据流的场景中。Java 作为一门广泛使用的编程语言，逐渐引入响应式编程的理念，以提升系统的响应速度和资源利用率。本文将通过一个简单的 Demo 来展示 Java 的响应式编程如何工作，并结合代码示例和关系图，帮助你更好地理解这一概念。
## 什么是
首先响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。最开始是从2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1
转载
2024-03-21 14:39:45
17阅读
移动设备优先：<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">媒体标签：@mediascreenand(min-width:100px){div{width:100px;height:1000px;background:yellow;}}完
原创
2018-04-22 10:19:36
1083阅读
点赞
2评论
响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法： .隐藏 ＋ 折行 ＋ 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
转载
2019-02-12 06:55:00
544阅读
2评论
<style type="text/css"> body{ margin:0 aut
原创
2022-07-28 17:33:28
167阅读
// PC端 @media (min-width: 767px) { } // 手机端 @media screen and (max-width: 767px) { } ...
转载
2021-08-23 08:47:00
287阅读
2评论
