做高性能的网站 哪门语言好,企业网盘系统,网站建设开发案例教程视频教程,游戏开发引擎目录
静态布局:
布局特点#xff1a;
设计方法:
PC :
移动端#xff1a;
优点#xff1a;
缺点#xff1a;
流式布局#xff1a;
布局特点#xff1a;
设计方法#xff1a;
缺点#xff1a;
自适应布局#xff1a;
布局特点#xff1a;
设计方法#…
目录
静态布局:
布局特点
设计方法:
PC :
移动端
优点
缺点
流式布局
布局特点
设计方法
缺点
自适应布局
布局特点
设计方法
响应式布局:
布局特点
优点
缺点
总结
弹性布局
rem、em区别
布局特点
优点
缺点
rem布局改变浏览器宽度页面所有元素的高宽都等比例缩放也就是大屏幕下导航是横的小屏幕下还是横的只不过变小了。
结论
1.如果只做pc端那么静态布局定宽度是最好的选择
2.如果做移动端且设计对高度和元素间距要求不高那么弹性布局remjs是最好的选择一份css一份js调节font-size搞定
3.如果pc移动要兼容而且要求很高那么响应式布局还是最好的选择前提是设计根据不同的高宽做不同的设计响应式根据媒体查询做不同的布局。
flex布局
总结
流动布局Flow Layout
优点简单易懂符合文档流规则适合简单的页面布局。
缺点缺乏灵活性难以实现复杂的多列布局或垂直居中等效果。浮动布局Float Layout
优点适用于创建多栏布局被广泛支持。
缺点需要清除浮动会影响文档流不够灵活不易实现等高布局。弹性布局Flexbox Layout
优点能够方便地实现水平、垂直居中等布局支持在一维上进行对齐和分布。
缺点兼容性较差某些特殊布局难以实现。网格布局Grid Layout
优点提供了多行多列布局的强大功能可以实现复杂的网格布局。
缺点兼容性较差对于一些旧版本浏览器支持不完善。响应式布局Responsive Layout
优点能够根据设备尺寸和方向自适应适用于移动端和多设备访问。
缺点需要额外的媒体查询和样式适配工作增加了开发复杂度。每种布局方式都有其适用的场景和局限性开发者需要根据具体需求和兼容性考虑选择合适的布局方式。 CSS布局是指利用CSS样式表来控制网页中各元素的位置、大小、间距等属性从而实现网页的排版布局。目前常用的CSS布局方式有以下几种 静态布局:
最为传统的一种布局方式网页上的所有元素都是用px为单位进行设定的。
布局特点
不论屏幕的大小页面宽高始终不变始终维持最初设计时的样式大小来显示常规的PC端网页都是用的静态布局也就是设置了min-width当小于这个宽度的时候出现滚动条当大于的时候让内容居中外加背景。
设计方法:
PC :
居中布局所有的元素样式都使用绝对的宽高px设计一个布局当屏幕大小进行变化时使用滚动条进行查阅被遮挡的部分。
移动端
另建立一个移动网站单独设计一个布局使用不同的域名wap.或 m.这种移动端布局常见于2G和3G时期现在很少使用了。
优点
这种布局方式对设计师和CSS编写者来说最为简单也不存在兼容性的问题。
缺点
很明显这种布局方式不能对不同的屏幕做出不同的表现。 当前许多的门户网站、大部分企业的PC宣传都会选择这种布局方式会有更好的展示效果。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单方法。到这种方法不是一种完全兼容未来网页的制作方法我们需要一些适应未知设备的方法。
流式布局
布局特点
当屏幕分辨率大小发生变化时页面里的元素大小会变化但布局不会发生变化。
设计方法
使用%百分比来定义宽度高度大都是用px来固定可以根据可视区域viewpoint和父元素的实时尺寸进行调整尽可能的去适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。 这种布局在web前端开发的早期历史上用来应对不同尺寸的PC屏幕那时是的屏幕尺寸的差异没有现在那么大在当今的移动端开发也是常用的布局方式。
缺点
如果屏幕的尺度跨度太大那么在相对原始设计而言过大或过小的屏幕上就不能正常的进行显示。因为宽度是使用的%来定义的但是高度和文字的大小等都是用px来固定的所以在大屏幕上有些元素的宽度被拉的很长但是高度、文字的大小还是原来的样式就会显得非常不协调。
自适应布局
自适应布局就是为不同的屏幕定义不同的布局就是创建多个静态布局每个静态布局对应一个屏幕分辨率范围。改变不同的屏幕分辨率可以切换不同的静态布局页面元素位置发生改变但在每个静态布局中 页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
布局特点
当屏幕的大小发生变化时页面里面的元素的位置会变化而大小不会变化。
设计方法
使用media媒体查询给不同的尺寸和介质的设备切换不同样式。 在优秀的响应范围设计下可以给适配范围内的设备最好的体验在同一个设备下实际上还是固定的布局。
响应式布局:
响应式设计的目标是确保一个页面在所有终端上各种尺寸的PC、手机、平板、智能手表的Web浏览器等等都能显示出令人满意的效果对CSS编写者来说有多种手法可以去实现但通常是糅合了流式布局弹性布局再搭配媒体查询技术使用。 分别为不同的屏幕分辨率定义布局同时在每个布局中应用流式布局的理念就是页面元素宽度随着窗口调整而自动适配。即创建多个流式布局分别对应一个屏幕分辨率范围。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 响应式布局几乎已经成为优秀页面布局的标准。
布局特点
每个屏幕分辨率下面会有一个布局样式即元素位置和大小都会变。 设计方法:媒体查询流式布局。通常使用media媒体查询和网格系统配合相对布局单位进行布局实际上就是综合响应式。流失等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。
优点
对PC和移动端有着非常好的适应只要有足够的耐心效果会非常棒。
缺点
媒体查询是有限的也就是可以枚举出来的只能适应主流的宽高。 要想 适配更多的屏幕大小工作量大设计也需要多个版本。
响应式页面在头部会加上这一段代码
meta nameapplicable-device contentpc,mobile
meta http-equivCache-Control contentno-transform
总结
响应式与自适应的原理是相似的都是检测设备根据不同的设备采用不同的CSS而且CSS都是采用%百分比的而不是固定宽度不同点就是响应式的模板在不同的设备上看上去是不一样的会随着设备的改变而改变展示样式而自适应不会所有的设备看起来都是一套模板只不过是长度或是图片变小了不会根据不同的设备展示不同的样式流式及时采用了一些设置当宽度大于多少时怎么展示小于多少时怎么展示而且展示的方式像流水一样一部分一部分的加载静态的就是采用固定的宽度。流式布局是用于解决类似的设备不同分辨率之间的兼容一般分辨率差异较少响应式是用于解决不同设备之间不同分辨率之间的兼容问题一般是指PC平板手机等设备之间较大的分辨率差异。
弹性布局
rem、em区别
两者都是顺应不同网页字体大小展示而产生的。 em是相对其父元素在实际应用中相对而言会带来很多不便 rem则是始终相对于html大小即页面根元素。
布局特点
使用em或rem单位进行布局相对%更加灵活同时可以支持浏览器的字体大小调整和缩放等的正常显示因为em是相对父级元素的原因没有得到推广。
包裹文字的各元素的尺寸采用em/rem做单位而页面的主要划分区域的尺寸仍使用%或px做单位同「流式布局」或「静态/固定布局」。早期浏览器不支持整个页面按比例缩放仅支持网页内文字尺寸的放大这种情况下。使用em/rem做单位可以使包裹文字的元素随着文字的缩放而缩放。更能适应缩进/以字体单位padding或margin浏览器设置字体尺寸等情况因为em/rem相对于字体大小会同步改变。例如p{ text-indent: 2em; }
浏览器的默认字体高度一般为16px即1em:16px但是 1:16 的比例不方便计算为了使单位em/rem更直观CSS编写者常常将页面跟节点字体设为62.5%比如选择用rem控制字体时先需要设置根节点html的字体大小因为浏览器默认字体大小16px*62.5%10px。这样1rem便是10px方便了计算。 html{font-size:62.5%;}
优点
理想状态是所有屏幕的高宽比和最初的设计高宽比一样或者相差不多完美适应。
缺点
这种remjs只不过是宽度自适应高度没有做到自适应一些对高度或者元素间距要求比较高的设计则这种布局没有太大的意义。如果只是宽度自适应更推荐响应式设计。
响应式和弹性布局之间的对比 响应式布局改变浏览器宽度“布局”会随之变化不是一成不变的例如导航栏在大屏幕下是横排在小屏幕下是竖排在超小屏幕下隐藏为菜单也就是说如果有足够的耐心在每一种屏幕下都应该有合理的布局完美的效果。
rem布局改变浏览器宽度页面所有元素的高宽都等比例缩放也就是大屏幕下导航是横的小屏幕下还是横的只不过变小了。
结论 1.如果只做pc端那么静态布局定宽度是最好的选择
2.如果做移动端且设计对高度和元素间距要求不高那么弹性布局remjs是最好的选择一份css一份js调节font-size搞定
3.如果pc移动要兼容而且要求很高那么响应式布局还是最好的选择前提是设计根据不同的高宽做不同的设计响应式根据媒体查询做不同的布局。
flex布局
总结
流动布局Flow Layout
优点简单易懂符合文档流规则适合简单的页面布局。
缺点缺乏灵活性难以实现复杂的多列布局或垂直居中等效果。 浮动布局Float Layout
优点适用于创建多栏布局被广泛支持。
缺点需要清除浮动会影响文档流不够灵活不易实现等高布局。 弹性布局Flexbox Layout
优点能够方便地实现水平、垂直居中等布局支持在一维上进行对齐和分布。
缺点兼容性较差某些特殊布局难以实现。 网格布局Grid Layout
优点提供了多行多列布局的强大功能可以实现复杂的网格布局。
缺点兼容性较差对于一些旧版本浏览器支持不完善。 响应式布局Responsive Layout
优点能够根据设备尺寸和方向自适应适用于移动端和多设备访问。
缺点需要额外的媒体查询和样式适配工作增加了开发复杂度。 每种布局方式都有其适用的场景和局限性开发者需要根据具体需求和兼容性考虑选择合适的布局方式。
