响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法： .隐藏 ＋ 折行 ＋ 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
转载
2019-02-12 06:55:00
544阅读
2评论
响应式布局就是在任何情况下，页面布局效果都不会发生变化，他会根据用户的电脑屏幕，尺寸大小来改变自身的布局。 浏览器窗口，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阅读
移动设备优先：<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评论
<style type="text/css"> body{ margin:0 aut
原创
2022-07-28 17:33:28
167阅读
/* 横屏 - iPhone X 系列*/@media screen and (max-aspect-ratio: 217/100){ .a{}}/* 横
原创
2023-03-02 16:05:13
116阅读
作者：icepy 在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。设置在本文中，我将继续使用我在第一篇 CSS Grid 布局
转载
2023-07-26 11:08:22
268阅读
响应式布局概念响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局布局特点响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+自适应布局。分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个
转载
2023-07-24 02:56:28
216阅读
对于小业务，需要自适应的相应式布局，如果引用bootstrap一样的框架，将会非常笨重，于是手写一个css/*自写栅格 start*/body { font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Heiti SC","Microsoft YaHei",sans-serif; margin:0;}
原创
2022-03-27 18:47:11
170阅读
所以我就在做自适应的时候查了一些资料首先我发现一个问题：有响应式布局和自适应布局两种布局效果简单来说，响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用户体验是一样的 ；而自适应布局同一页面在不同设备可能呈现不一样的页面效果，比如两张图并排排列变成两张图上下排列 总体来说，现如今响应式布局使用得更多，而不用框架实现自适应
转载
2023-07-21 17:06:48
67阅读
1.css单位CSS 有几种表示长度的不同单位。 许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。 长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。 css单位主要包含两部分：绝对单位和相对单位 绝对单位：就是元素的长度是固定的 ...
转载
2021-08-04 14:47:00
569阅读
.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阅读
对于小业务，需要自适应的相应式布局，如果引用bootstrap一样的框架，将会非常笨重，于是手写一个css/*自写栅格 start*/body { font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Heiti SC","Microsoft YaHei",sans-serif; margin:0;}
原创
2021-06-17 12:31:44
385阅读
文章目录前言响应式布局@media学习前提准备@media使用前言本篇博客是关于CSS的响应式布局，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)响应式布局@media学习使用@media目的：让网站进行自适应，对移动端设备访问页面友好，适应各种窗口类型，根据屏幕宽度来判断输出使用不同的css样式。
原创
2022-05-10 10:22:07
95阅读
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。CSS Viewport units(视口单位)在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。在本文中，我们将学习 CSS Vie
转载
2021-02-08 10:39:17
483阅读
2评论
响应式布局 一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。 媒体类型 在何种设备或者软件上将页面打开 all：所有媒体 braille：盲文触觉设备 embossed：盲文打印机 print：手持设备 projection：打印机预览 screen：彩屏设备 speech：'听觉'类似
转载
2020-10-14 15:43:00
163阅读
2评论
从概念上看两者的区别：响应式布局就是响应式设计方案呈现的效果，具体指页面的布局会根据不同设备的显示面积（主要是宽度）的不同而呈现不同的布局，这个效果比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现出布局更灵活，可读性更强，当然对研发的要求也会更高（比如说如何更好地让图片、适配、UI动态效果自适应各种布局）。响应式设计一般来说是一套设计方案解决所有的设备的自适应问题。移动端布局就是传
转载
2023-10-05 07:35:05
382阅读
制作手机界面时，一般按照2倍的大小去做。如果设备的宽度大于显示的宽度，可以做一个适配流体布局来个例子，体验代码PC端可适配移动端电脑，与移动端都可正常显示假设，给每一个a标签加上了边框效果期待效果解决办法，一calc函数，百分比减多出的象素值左边框2，右边框2，每一个a多出了4象素，减掉就好解决方式二设置box-sizing:border-b...
原创
2021-08-14 09:59:15
835阅读
响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3MediaQuery实现响应布局）。 响应式布局的
转载
2023-07-12 17:34:25
95阅读
bootstrap缺点：css太重，牵一发而动全身bootstrap框架的栅格布局原理：flex布局栅格布局实现原理•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好
转载
2023-08-26 08:42:27
140阅读
