建站系统cms,营销型网站收费,代码优化,大连网站设计 仟亿科技rem 单位实际上既不是响应式布局、也不是流式布局或弹性布局的概念。rem 是一种相对长度单位#xff0c;它是相对于根元素#xff08;html 元素#xff09;的字体大小来计算实际长度的单位。
响应式布局、弹性布局和流式布局是网页设计中常用的三种布局方式#xff0c;它们…rem 单位实际上既不是响应式布局、也不是流式布局或弹性布局的概念。rem 是一种相对长度单位它是相对于根元素html 元素的字体大小来计算实际长度的单位。
响应式布局、弹性布局和流式布局是网页设计中常用的三种布局方式它们各自有不同的特点和应用场景。 响应式布局Responsive Layout 响应式布局是一种可以根据用户设备的屏幕尺寸和分辨率来动态调整页面布局的设计方法。通过使用媒体查询Media Queries开发人员可以为不同的屏幕尺寸设置不同的样式表使网页在不同设备上都能够呈现最佳的显示效果。响应式布局可以适应各种设备如桌面电脑、平板电脑和手机等。 弹性布局Flexible Layout 弹性布局是指通过相对单位如百分比和弹性盒子模型Flexbox等技术在页面布局中使用相对尺寸和比例使得页面中的元素能够根据屏幕大小或父容器的尺寸进行动态调整。弹性布局能够让页面更好地适应不同尺寸的屏幕提高页面的灵活性和可扩展性。 流式布局Fluid Layout 流式布局是一种相对于固定像素的布局方式通过设置元素的尺寸为百分比或em单位使得页面中的内容能够根据浏览器窗口的大小进行伸缩和调整从而实现页面的自适应。流式布局可以确保页面内容在不同分辨率的屏幕上都能够流畅显示并且适应性更强。
总的来说响应式布局主要侧重于适配不同设备弹性布局注重于元素之间的相对排列和伸缩而流式布局则侧重于页面内容的流动性和自适应性。在实际的网页设计中通常会结合使用这三种布局方式以达到更好的视觉效果和用户体验。 一、固定布局pc端静态布局 以像素作为页面的基本单位不管设备和浏览器宽度只设计一套尺寸。实际情况下没啥用
二、根据不同的分辨率加载不同的CSS样式文件可切换的固定布局自适应布局CSS样式就得写几套太麻烦了
scriptconst screeenWidth window.screen.width// 分辨率大于等于1680大部分为1920的范围情况下调用此cssif(screeenWidth 1680){document.write(link relstylesheet hrefcss/index_1920.css);}// 分辨率在1600-1680这个范围的情况下调用此csselse if(screeenWidth 1600){document.write(link relstylesheet hrefcss/index_1600.css);}// 分辨率小于1600的范围情况下调用此csselse{document.write(link relstylesheet hrefcss/index.css);}
/script
注意这里的js一定要写在head/head标签里面这样在加载页面内容之前可以提前把css样式表加载出来。
三、rem布局移动端
1、媒体查询结合 rem 布局
媒体查询动态修改根元素的大小使得 rem 一直在跟着变化响应式就成功了。
2、flexble.js 和 rem 布局 简洁高效的 rem 适配方案 flexible.js 它的原理是把当前设备划分为10等份,但是不同设备下比例还是一致的。 我们要做的就是确定好我们当前设备的html文字大小就可以了 下载地址https://github.com/amfe/lib-flexible
实现详情 1.下载 flexible.js 放到项目目录里去
│ index.html
│
├─css
│ index.css
│ normalize.css
│
├─images
└─jsflexible.js 2.引入flexible.js
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, user-scalableno,initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgelink relstylesheet hrefcss/normalize.csslink relstylesheet hrefcss/index.css!-- 引入我们的flexible.js 文件 --script srcjs/flexible.js/scripttitleDocument/title
/head
index.css
body {min-width: 320px;max-width: 750px;/* flexible 给我们划分了 10 等份,所以应该是10rem */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;
}
3.完美的响应式弹性布局 vw vh rem 屏幕适配方案
a. vw、vh是基于视口的布局方案故这个meta元素的视口必须声明。解决宽高自动适配 meta nameviewport contentwidthdevice-width,initial-scale1.0b. rem布局-解决字体适配
rem布局原理根据CSS的媒体查询功能更改html根字体大小实现字体大小随屏幕尺寸变化。
media only screen and (max-width: 1600px) and (min-width: 1280px){html{font-size: 14px;}}media only screen and (max-width: 1280px) and (min-width: 960px){html{font-size: 12px;}}media only screen and (max-width: 960px){html{font-size: 10px;}} c. vw、vh、rem的使用
templatediv classbox/div
/template
style.box{width:50vw;height: 20vh;line-height: 20vh;font-size: 1.5rem;margin:0 auto;font-weight: bold;background-color: rgba(255,255,255,0.8);}
/style
上面代码中的50vw代表了此div占据视口宽度的50%、高度占据视口高度的20%并且会随着视口的变化进行自适应字体则是1.5倍的html根字体大小并且根据媒体查询进行字号变化。
四、弹性布局 Flexboxflex布局 CSS Grid 布局CSS Grid Layout 是一种二维网格布局系统通过将容器划分为行和列的网格来实现布局可以灵活控制元素在网格中的位置和大小。与 Flexbox 不同Grid 布局更适用于复杂的多列布局需求。 table 相关属性在一些特定场景下可以使用 display 属性将元素设置为 table 相关的值如 table、table-cell、table-row 等模拟表格布局的方式来实现弹性布局效果。不过这种方法通常在处理复杂布局时会显得笨重。 float 属性虽然 float 主要用于实现文字环绕图片等效果但在一些早期的布局设计中也曾经利用 float 实现一定程度上的弹性布局效果。但是相比于 Flexbox 和 Grid 布局float 的应用范围较为有限。 calc() 函数calc() 函数可以进行简单的四则运算如计算元素的宽度或高度。结合百分比、像素等单位可以实现更灵活的布局设计。
五、流式布局 使用百分比布局设置元素的宽度、高度、内边距等属性为百分比使其随着父容器的大小按比例进行调整。 流式图像Fluid Images将图像的宽度设置为百分比让图像能够随着屏幕大小的变化而自适应调整大小。 流式文本Fluid Typography使用相对单位如em、rem设置字体大小让文字在不同屏幕尺寸下保持良好的可读性。
六、响应式布局
1.媒体查询
媒体查询可以让我们根据设备显示器的特性如视口宽度、屏幕比例、设备方向横向或纵向为其设定CSS样式媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。 Link元素中的CSS媒体查询
link relstylesheet media(max-width: 800px) hrefexample.css /在网页代码的头部加入一行viewport元标签CSS3必须设置
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalablenoviewport视口widthdevice-width: 告诉浏览器将页面宽度设置为设备的屏幕宽度这样网页将会根据设备的屏幕大小来自动调整和适配布局以确保内容在不同设备上展示时能够更好地呈现和适应。initial-scale[0,10] 初始缩放比例1表示不缩放minimum-scale[0,10] 最小缩放比例最好不小于1maximum-scale: [0,10] 最大缩放比例最好不小于1以上3个属性的值最好都控制在1-10尽量往放大的方向走小于1可能会造成布局的混乱user-scalable: yesno 是否允许手动缩放页面默认值为yes
语法
/* 大屏幕 */
media only screen and (min-width:1200px) {对应的样式
}/* 中等屏幕 */
media only screen and (min-width: 992px)and (max-width: 1199px) {对应的样式
}/* 小屏幕 */
media only screen and (min-width: 768px)and (max-width: 991px) {对应的样式
}/* 手机端显示 */
media only screen and (max-width: 767px) {对应的样式
} 2.用百分比去写元素的宽度不要写绝对宽度
.mybox {width: 30%;
}这里需要注意div宽度的计算方法CSS盒式模型的宽度设置有两种模式
width 内容宽度
实际总宽度 width padding border
这种情况下设置了 width 后内容宽度不变而调整 padding 和 border 都会使得div的实际总宽度变化
width 实际总宽度
width 内容宽度 padding border
这种情况下设置了 width 后div总宽度不变
可以通过设置 css 的 box-sizing 属性来控制
content-boxwidth 内容宽度 (默认)
border-boxwidth 实际总宽度 3.让子元素撑起父元素的高度而不要写绝对高度 .parent {width: 30%;
}
.child {width:100%;height:100px;
}
4.字体使用相对大小 “em” 或 “rem”
h1 {font-size: 2rem;
}1.浏览器默认字体为 16px 2rem 即 2 * 16px 32px2.emfont size of the element是指相对于父元素的字体大小的单位如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸因此 em 的大小并不是固定的。/* 设置段落字体大小为 16px */
p {font-size: 16px;
}/* 设置段落内部元素的宽度为 2em */
p .inner-element {width: 2em; /* 宽度为当前字体大小的两倍即 32px */
}/* 设置标题字体大小为 20px */
h1 {font-size: 20px;
}/* 设置标题的上下边距为 0.5em */
h1 {margin-top: 0.5em; /* 上边距为当前字体大小的一半即 10px */margin-bottom: 0.5em; /* 下边距为当前字体大小的一半即 10px */
}3.rem是指相对于根元素的字体大小的单位,目前除了IE8及更早版本外所有浏览器均已支持rem。
对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。h1 {font-size: 32px;font-size: 2rem;
} 5.图片的大小也用百分比表示 img {width: 100%;
}也可以设置 max-width这样一来图片最大不会超过原始尺寸避免图片由于放大而模糊img {max-width: 100%;width: auto;
}
