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评论
CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够 1.媒体查询 media query 媒体:电脑,纸张
转载
2020-06-02 16:21:00
111阅读
概念： 响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 用到的技术： 多使用 max-width、min-width，不写死宽度； 使用 media 查询来响应不同分辨率； 使用动态 REM 方案保证手机端的显示 ...
转载
2021-10-11 20:13:00
171阅读
2评论
什么是响应式设计？是什么？一句通俗易解得话就可以概括，所谓响应式设计就是可以让你设计的网页不仅仅在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阅读
响应式布局就是在任何情况下，页面布局效果都不会发生变化，他会根据用户的电脑屏幕，尺寸大小来改变自身的布局。 浏览器窗口，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阅读
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>flex ...
转载
2021-10-21 16:07:00
279阅读
2评论
政务网站制作要点（一 ）响应式的制作1.排列方式：导航：一行变为两行；水平结构：变成纵向排列；2.隐藏显示：在某个宽度的时候，特定的标签显示或者隐藏；3.尺寸变化：典型--->轮播部分，文字、行间距、图片的宽高都会变化以适应屏幕的尺寸；4.面包（bread）导航，如北京大学的官方网站的导航部分（北京大学官网链接），缩小页面的情况下会出现三层面包导航结构5.响应式布局：又称“自适应网页设计”，
转载
2023-10-08 08:47:39
161阅读
html 页面中不同分辨率引用不同css、<link rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)" href="css/jzbk_style_sm.css"><link rel="stylesheet" type="text/css"
转载
2021-07-15 13:58:44
173阅读
Ⅰ、 Vue 响应式：1、什么是 Vue 响应式： 答：简单说：当更新或者增加data(数据)时，页面(UI)会有响应，重新渲染对应的数据；2、Vue 响应式的特点： 其一、对象新增加的属性，不具有响应式； 其二、修改对象本存在属性，具有响应式； 其三、数组的普通(非对象)元素通过索引修改，不具有响应式； 其四、数组的对象元素通过索引修改，具有响应式； 其五、数组通过调用 ‘push/splice
转载
2024-09-25 08:12:39
189阅读
做前端布局时，遇到复杂的页面结构——比如左侧固定侧边栏、中间内容区分上下两栏、右侧还有悬浮信息卡的场景，用Flexbox往往要嵌套好几层容器，还要计算各种间距和比例，代码又乱又容易出问题。但自从用了CSS Grid布局，我发现这类复杂布局居然能“一步到位”——Grid就像给页面画了一张“网格蓝图”，直接定义行和列的规则，元素就能自动归位，响应式适配也只需改几行代码。本文结合三个真实业务场景，分享G
前端响应式布局前端网页布局分类♣ 固定宽度布局：以px为单位设置固定的宽度；♣ 流式布局：以百分比为单位设置相对布局；♣ 响应式布局：通过检测设备信息，决定网页的布局方式，一般情况下检测设备的宽度来实现(CSS样式中通过‘@media’来实现)♣ 栅格布局：以百分比为单位将网页划分为均等长度，排版布局时以这些均等长度作为度量单位；响应式布局响应式布局的优势一个网站能够兼容多种设备终端，根据不同的屏
转载
2023-10-28 18:47:32
164阅读
// PC端 @media (min-width: 767px) { } // 手机端 @media screen and (max-width: 767px) { } ...
转载
2021-08-23 08:47:00
287阅读
2评论
/* 横屏 - iPhone X 系列*/@media screen and (max-aspect-ratio: 217/100){ .a{}}/* 横
原创
2023-03-02 16:05:13
116阅读
