响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3MediaQuery实现响应布局）。 响应式布局的
转载
2023-07-12 17:34:25
95阅读
今年年中XX阅读器（避免广告嫌疑）打卡结束，原价12XX的阅读器小黄鱼上大量涌现，当时正好有看电子书的诉求，4XX价格入手了一个，自带阅读器软件，但导入图书只能用局域网电脑网页的方式，略显麻烦，但那时阅读量不大，倒不是很妨碍阅读。 下半年有些人文类电
转载
2024-09-12 21:23:07
22阅读
在制作网页中，我们经常会碰到min/max-width,min/max-height在IE6底下是无效的，这也是web设计师最头疼
转载
2023-05-11 13:53:40
198阅读
什么是响应式设计？是什么？一句通俗易解得话就可以概括，所谓响应式设计就是可以让你设计的网页不仅仅在PC端显示，还可以在智能机以及iPad平板等移动设备上显示，应用了响应式设计的网页可以随着分辨率的大小进行样式变化，但是响应式设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式现在响应式设计已经应用的越来越广，学前端的我们不能不去掌握响应式设计，像美国白宫就对其
xs 屏幕 < 576px sm 屏幕 ≥ 576px md 屏幕 ≥ 768px lg 屏幕 ≥ 992px xl 屏幕 ≥ 1200px xxl 屏幕 ≥ 1600px BootStrap 4 的规则
原创
2022-09-29 16:11:09
135阅读
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阅读
HTML5目前发展势头良好，已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时，目前基于响应式的网页设计理念也得到了广泛的认同，开发者在开发基于HTML 5的网页时，如果能创建响应式的页面，则会增色不少，特别是能适配各类移动终端。在本文中，读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需
移动设备优先：<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评论
/* 横屏 - iPhone X 系列*/@media screen and (max-aspect-ratio: 217/100){ .a{}}/* 横
原创
2023-03-02 16:05:13
116阅读
flex布局父元素属性flex-direction：元素排列方向row从左到右（默认） row-reverse从右到左 column(从上到下） column-reverse如果父元素不设置高度，会有子元素的高度把他撑起来如果给父元素设置了display：flex，并且宽度小于子元素总体宽度的和，自动对子元素进行压缩
如果想让他换行：flex-wrapflex-wrap：元素换行nowrap：默认
感谢原文作者：fly63前端网
目录概述语法媒体类型（mediaType ）媒体功能（media feature）引入方式1. CSS2 Media方式2. CSS3 Media方式开始编写响应式页面前的准备工作1：设置Meta标签2：加载兼容文件JS3：设置IE渲染方式默认为最高(可选)代码示例在使用过程中遇到的问题概述@media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应
转载
2024-03-25 21:03:10
111阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
原创
2024-04-28 14:34:21
779阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
原创
2022-06-30 16:22:14
2250阅读
