罗砂 - 博客园

2022年3月29日

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-03-29 21:20 罗砂阅读(88) 评论(0) 推荐(0)

响应式布局/媒体查询简介

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-03-29 16:01 罗砂阅读(42) 评论(0) 推荐(0)

响应式布局

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-03-29 15:02 罗砂阅读(37) 评论(0) 推荐(0)

vw的适配

摘要：网页中字体大小最小是12px，不能设置一个比12像素还小的字体如果我们设置了一个小于12px的字体，则字体自动设置为12 0.13333333vw = 1px 5.33333vw = 40px 阅读全文

posted @ 2022-03-29 11:02 罗砂阅读(60) 评论(0) 推荐(0)

vw单位

摘要： vw是由视口的宽度计算的不同的设备完美视口的大小是不一样的 iPhone6 375 iPhone6plus 414 由于不同设备视口和像素比不同，所以同样的375像素在不同的设备下意义是不一样的. 比如在iPhone6中 375就是全屏，而到了 plus 中375就会缺一块所以在移动端开发时，就阅读全文

posted @ 2022-03-29 10:42 罗砂阅读(986) 评论(0) 推荐(0)

完美视口

摘要：移动端默认的视口大小是980px(css像素)，默认情况下，移动端的像素比就是 980/移动端宽度（980/750）如果我们直接在网页中编写移动端代码，这样在9980的视口下，像素比是非常不好导致网页中的内容非常非常的小编写移动页面时，必须要确保有一个比较合理的像素比： lcss像素对应阅读全文

posted @ 2022-03-29 10:09 罗砂阅读(103) 评论(0) 推荐(0)

弹性元素的样式

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-03-29 09:21 罗砂阅读(40) 评论(0) 推荐(0)

2022年3月28日

弹性容器的样式

摘要： /* 设置自动换行 */ flex-wrap: wrap; 原图：效果： /* 简写属性 */ flex-flow: row wrap; /* 居中排列 */ justify-content: center; /* 元素左靠*/ justify-content: flex-start; /* 元素阅读全文

posted @ 2022-03-28 22:59 罗砂阅读(31) 评论(0) 推荐(0)

弹性盒简介

摘要： flex（弹性盒）比浮动方便是css中有一种布局手段，它主要用来替代浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以跟随页面的大小的而改变而改变弹性容器要使用弹性盒，必须先将一个元素设置为弹性容器我们通过 display 来设置弹性容器 display:flex 设置为块级弹性阅读全文

posted @ 2022-03-28 13:44 罗砂阅读(259) 评论(0) 推荐(0)

less混合函数

摘要： // 混合函数，在混合函数中可以直接设置变量 // .p5(@w:100px,@h:100px,@bg-color:red ){ .p5(@w,@h,@bg-color ){ width: @w; height: @h; background-color: @bg-color; } // 必须得按照阅读全文

posted @ 2022-03-28 10:04 罗砂阅读(47) 评论(0) 推荐(0)

0722tian

公告