页面布局 | 易学教程

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。　在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？ ) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem ）　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见 content"width=640

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

㈠概念 ⑴ 静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。例如：浏览器窗口是1000px，那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。 ⑵ 自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。但是字体不会改变 ⑶ 流式布局：rem布局+viewport;元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。比如，对移动端来说不错 ⑷ 响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。 ⑸ 弹性布局：要点在于使用 em和rem单位来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。㈡布局特点 ⑴静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 ⑵自适应布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 ⑶流式布局：屏幕分辨率变化时

html：html认知总结

阅读更多关于 html：html认知总结

什么是html？html是超文本标记语言，超文本包含图片，文字，链接，视频，音频等，标记是指标签，所以叫超文本标记语言。超文本元信息　　元信息标签：所谓元信息，是指描述自身的信息，元信息类标签，就是html用于描述文档自身的一类标签。　　它们通常出现在head标签中，一般不会在页面被显示出来（与此相对，其他标签，如语义类标签，描述的是业务）元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。　　head：元信息容器　　meta：元信息通用标签（name和http-equiv两种键）　　base：页面的基准url（容易出错，不建议使用，通常也不会用）　　title：文档标题　　meta常用写法：　　　　<meta charset=”utf-8” />：定义解析文档的格式，建议放第一行　　　　<meta http-equiv=”content-type”content=”text/html;charset=utf-8” />：同时添加content-type这个http头，并且指定了http编码格式。　　　　<metaname=”viewport”content=”width=device-width,initial-scale=1,minimum-scale=1,masimum-scale=1,user

精通移动端布局 - 实践篇 -

阅读更多关于精通移动端布局 - 实践篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选，提炼出来，原本我也想用我匮乏的语言来描述，但是发现别人已经总结的更好了，所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录：基本概念物理像素设备独立像素 CSS 像素 PPI的概念 DPR的概念缩放的概念 viewPort 的概念 viewport 渲染流程 Meta 标签说明移动端布局实践混合方式 REM 方式响应式 JS自动换算缩放方式 CSS3 缩放 viewport 缩放相关补充为什么需要meta标签？传统响应式布局与移动端响应式的区别移动端字体以及大小的设置移动端背景图缩放设置使用Sass提高px与rem转换效率通过Chrome进行真机调试 weinre 远程调试移动端布局实践混合方式混合方式实现的移动端布局实际上就是对PC端布局技术的组合使用，它主要包含以下技术：定位布局浮动布局可塑性布局百分比布局相对单位将这些布局方法根据页面每个不同部分的特性进行组合使用，例如模态框，弹出层等可以采用定位方式，而页面元素的排版可以采用浮动布局，也可以使用具有可塑性的Flex布局方案，对于元素的尺寸可以采用百分比或者其它相对单位,而这便是我称之为“混合方式”的原因。混合方式进行的移动端网页布局，所采用的技术通常都具有灵活、可伸缩、可塑等特点，甚至连使用的单位，最好都是相对单位

页面布局-浮动、定位

阅读更多关于页面布局-浮动、定位

id选择器里面只能有一个值，class可以有多个值。回顾什么是盒子模型元素(盒子) 实际大小(内容、边框、内边距) 块状元素内联元素 display 属性： none / inline / block / inine-block 标准文档流盒子和盒子位置 margin塌陷相关属性 display / overflow:auto/hidden/scroll overflow-x overflow-y margin visibility:visible/hidden 1 浮动 1.1 浮动元素可以设置向左或者向右浮动（不会跳出父元素的宽）元素浮动后，会脱离文档流。（对后面的元素产生影响）元素一旦浮动，会转换为块状元素浮动的元素并不独占一行(仍然是块状元素) 因为脱离标准文档流浮动的元素，宽度默认会是auto，被内容撑开多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>同志浮动</title> 6 <style> 7 .box { 8 padding: 20px; 9 width: 1000px; 10 border: 5px dashed red; 11 margin-bottom:

前端开发之css布局问题

阅读更多关于前端开发之css布局问题

作为前端小白白，对于这两天学习的前端知识做了一下总结。写页面第一步想要写好一个页面，最最重要的就是要先分析页面，他有几块，分成几个div。刚开始写的时候一边写html一边写css搞得我心憔悴。受前端大神指点，改变策略。先写html把东西写好，减少嵌套。然后再写css。css中先定好位置，然后写长宽，字体写大小颜色等等。css要语义化，根据功能去起名字。常见的有contiler、header、nav、content、list、item、title、subtitle、detail、footer等等写app页面的小技巧 html中div布局尽量要简洁,对于app页面中有列表的，就是那种一块一块的，每一块都差不多的那种用ul标签里面嵌套div的方式。对于ul li a的理解 ul li必须配套使用，a可以单独使用各种标签每一次写页面莫过于纠结到底用哪个标签，span标签自适应比较好用，p标签成一行，img标签里面加上一个class，多个img外面嵌套一个div。对于小图标用i标签。一些小图标可以直接从阿里巴巴矢量库中引用，会出一链接可以直接添加到html中的link标签里，不要忘记前面加上http：。i标签中class里面前面一定要加上iconfont+图标库中小图标的名称。转载于:https://my.oschina.net/u/3883702/blog/1829060

移动端布局

阅读更多关于移动端布局

一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

移动端页面布局的那些事儿

阅读更多关于移动端页面布局的那些事儿

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时

H5 css3布局

阅读更多关于 H5 css3布局

移动布局 1. 移动设备手机和 ipad 安卓系统 ios 系统安卓系统内置浏览器是谷歌 ios 内置 safari 浏览器他们的内核都是 webkit ，不考虑兼容性，需要考虑的是安卓和 ios 的区别。 2，布局设备宽度设备的实际大小设备的分辨率厂家给的页面的大小设计稿上的大小浏览器的视口浏览器自带的用 document.documentElement.clientWidth 查看，在移动设备上如果不做视口处理一般默认是 980 ，例子设备宽是 320 页面宽是 1200 浏览器视口是 980px 三种不统一，我们用移动设备看页面，浏览器的视口会自动缩小，以 100% 完整展示页面，就会变的不清楚，特别挤。我们需要把这三个变的统一。移动设备宽（ 320 ）和浏览器视口（ 980 ）宽一致在 head 之间加一个 meta 标签 name= ”viewport” <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时如果页面宽大于这个数字，就会出现滚动条。 2. 当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽

移动端布局

阅读更多关于移动端布局

1.移动设备手机和ipad 系统：安卓系统、ios系统安卓系统：内置浏览器是谷歌 ios系统：内置Safari浏览器，他们的内核是webkit，不考虑兼容性，需要考虑的是安卓和ios的区别 2.布局布局考虑：　　设备的实际大小，设备的分辨率，厂家（设计者）给的分辨率　　页面的大小，设计稿上的大小（设计稿上的大小是多大，开发的页面大小就是多大）　　浏览器的视口，浏览器自带的document.documentElement.clientWidth,在移动设备上如果不做处理查看一般默认是980 　　eg：设备宽是320px，页面宽是1200px，浏览器视口是980px，三者统一，我们用移动设备看页面，页面的视口会自动缩小，以100%完整的展示页面，但是就会变得不清楚，特别挤，视觉效果极差　　解决：　　需要把这三个变得统一　　（1）移动设备（320）和浏览器视口（980）一致，在head之间加一个meta标签 name=“viewport” 　　<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> 　　移动设备宽度和浏览器视口一致时，如果页面宽度大于整个数字，就会出现滚动条　　（2

订阅页面布局