响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法： .隐藏 ＋ 折行 ＋ 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
转载
2019-02-12 06:55:00
544阅读
2评论
响应式布局 一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。 媒体类型 在何种设备或者软件上将页面打开 all：所有媒体 braille：盲文触觉设备 embossed：盲文打印机 print：手持设备 projection：打印机预览 screen：彩屏设备 speech：'听觉'类似
转载
2020-10-14 15:43:00
163阅读
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阅读
搭建一款产品原型时，萌生了学一点前端的想法，记录所学，备忘之用。里面的内容很基础，适合入门之用，同时也支持在线编辑器，可以直接所见所得 先从一篇支持响应式的博客布局开始<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</
转载
2023-07-10 18:22:56
117阅读
作者：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阅读
技术描述这个技术用来干嘛？
响应式布局用于使页面在不同的设备上都能有一个正常的样式显示，支持用户不同显示规格的设备上访问页面且仍有良好体验。为什么要学这个？
随着移动端的普及，现在的页面最基础也需要达到PC端和手机端的样式能够让人在接受的程度。如果用户手机打开页面整个样式崩溃了，那他也没有理由继续选用你的应用了。技术难点在哪？
页面的CSS不能再写死了，要使用百分比，或者直接使用flex弹性布局（
转载
2024-02-19 20:43:52
212阅读
对于小业务，需要自适应的相应式布局，如果引用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阅读
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阅读
所以我就在做自适应的时候查了一些资料首先我发现一个问题：有响应式布局和自适应布局两种布局效果简单来说，响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用户体验是一样的 ；而自适应布局同一页面在不同设备可能呈现不一样的页面效果，比如两张图并排排列变成两张图上下排列 总体来说，现如今响应式布局使用得更多，而不用框架实现自适应
转载
2023-07-21 17:06:48
67阅读
对于小业务，需要自适应的相应式布局，如果引用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评论
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作
转载
2023-07-19 21:43:01
102阅读
htCSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构
原创
2022-12-26 15:14:36
190阅读
