页面布局方案

最新推荐文章于 2024-06-24 23:36:08 发布
最新推荐文章于 2024-06-24 23:36:08 发布
阅读量2.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunChow520/article/details/103031093
版权

页面布局

  • 静态布局(Static Layout)
    使用CSS逻辑像素单位px进行定宽布局，是PC端最常见形式。
  • 流式布局(Liquid Layout)
    流式布局的特点是页面元素宽度按屏幕分辨率进行适配调整，但整体布局不变，典型代表是栅格系统。页面主要划分区域尺寸使用百分比，并搭配min-*、max-*属性属性。
  • 自适应布局(Adaptive Layout)
    创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。屏幕分辨率改变时可以切换为不同的静态布局，页面元素位置会发生改变。但每个静态布局中，页面元素不会随着窗口大小的调整发生变化。实现方式是使用@media媒体查询给不同尺寸和介质的设备切换不同样式。
  • 响应式布局(Responsive Layout)
    响应式设计目标是确保一个页面在所有终端都能显示出令人满意的效果，通常会糅合流式布局、弹性布局，再搭配媒体查询使用。会分别为不同屏幕分辨率定义布局，同时在每个布局中应用流式布局理念，即页面元素宽度随窗口调整而自动适配。也就是创建多个流体式布局，分别对应一个屏幕分辨率范围。可以将响应式布局看作是流式布局和自适应布局设计理念的融合。
  • 弹性布局(Flexiable Layout)
    以REM或RM为单位的布局，适用于移动端且设计对高度和元素间距要求不高。采用REM+JS方式只是宽度自适应，高度并没有做到自适应。对高度或元素间距要求较高的设计，并不合适。

设备像素

  • 设备物理像素（Physical Pixel）
    表示每英寸所拥有的像素数量，一个物理像素是显示屏上最小的物理显示单元。物理像素数值越大，代表屏幕能够以更高的密度来显示图像。在操作系统调度下，每个设备像素都拥有自己的色值与亮度值。
  • 设备独立像素（Density-Independent Pixel，DIP）
    设备独立像素又叫做密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（如CSS中的像素），然后会根据相关系统转换为物理像素。
  • CSS像素
    CSS像素是一个抽象的的单位，主要使用在浏览器中用来精确度量页面内容。一般而言，CSS像素又称为与设备无关的像素，即设备独立像素DIP。
    页面中CSS中单位默认使用的是像素px，CSS中的像素是一个相对值，在不同设备屏幕中对应着不同的设备像素。
    例如：在PC中1个CSS像素等于1个物理像素。而在3.5英寸的iPhone3GS分辨率320 x 480中1个CSS像素等于1个物理像素，而在3.5英寸的iPhone4S分辨率640 x 640中1个CSS像素等同于2个物理像素。这也就意味着相同一块3.5英寸的区域内像素多了一倍。
  • 设备像素比（Device Pixel Ratio，DPR）
    设备像素比是指物理像素和设备独立像素的对应关系，某在某方向中，设备像素比的计算公式是：设备像素比 = 物理像素 / 设备独立像素。可通过JavaScript中的window.devicePixelRatio获取当前设备的DPR。
设备设备物理像素设备独立像素设备像素比屏幕宽高比宽高比等值转换屏宽转414
iPhone3G/S320 x 480320 x 48012:39:13.5414 x 621
iPhone4S640 x 960320 x 48022:39:13.5414 x 621
iPhone5S640 x 1136320 x 568240:719:16414 x 736
iPhone6750 x 1334375 x 66729:169:16414 x 736
iPhone6+1242 x 2208414 x 73639:169:16414 x 736
  • 位图像素
    一个位图像素是栅格图像（如jpg、png、gif等）最小的数据单元，每个位图像素包含自身的显示信息，如显示位置、颜色值、透明度等。理论上，一个位图像素对应于一个物理像素，图像才能得到完美清晰的展示。
4933701-40509fb3afe0ada5.png
位图像素

例如：对于DPR=2的Retina屏幕而言1个位图像素对应于4个物理像素，由于单一位图像素不可再分割，所以只能就近取色，从而导致图片模糊。所以对于图片清晰度问题，较好的方案是提供两倍图@x2。

像素密度PPI

类型尺寸屏幕分辨率设备独立像素DIP屏幕像素密度PPI
iPhone6,7,8 @2x4.7750 x 1334375 x 667 1dp = 2px326
笔记本14, 15.61080 x 1920157, 147
显示器24, 271080 x 2048 2k96, 85

像素密度表示设备屏幕能够显示的设备独立像素DIP的数量，屏幕显示的像素数量越多画面也就越精细，同时同样屏幕区域能够显示的信息也就越多。

屏幕由像素点组成，每个像素点发出不同颜色的光，进而构成界面。而屏幕的物理尺寸与像素尺寸是不成比例的。不同尺寸的手机屏幕拥有不同的分辨率，分辨率实际上是手机像素的宽高尺寸。

像素密度（pixels per inch,PPI或DPI）表示每英寸长度上排列的设备独立像素点DIP的个数，1英寸等于2.53厘米。像素密度PPI越高则表示屏幕分辨率越高进而屏幕显示越精细。Retine屏幕比普通屏幕清晰的原因，是因为它的像素密度是普通屏幕的数倍。

4933701-504b9551aa92f91f.png
像素密度

例如：3.5英寸的iPhone手机屏幕

  • iPhone 3GS的屏幕分辨率为320 x 480
  • iPhone 4S的屏幕分辨率为 640 x 960
4933701-6156e3b0f6e7771b.png
3.5英寸的iPhone

日常所说的屏幕尺寸，实际是指屏幕对角线的长度。计算像素密度首先需要计算设备屏幕对角线等效像素，然后除以对角线长度。例如HTC G7分辨率为480x800，3.7英寸，计算出像素密度为252PPI。

像素密度PPI = 平方像素宽加平方像素高之和开平方的结果，再除以屏幕对角线的英寸数。

4933701-0573c6aecada937d.png
iPhone屏幕尺寸

密度决定比例

通过计算像素密度PPI可以得知设备屏幕属于哪个密度区间，因为不同密度区间对应着不同的默认缩放比例。

像素密度PPI类型
120~160低密度
160~240中密度
240~360高密度
>320超高密度（Retina）
4933701-b8e2d1569532ab90.png
image.png

缩放比

设备设备宽度设备宽度对角线逻辑分辨率缩放比率设备分辨率像素密度
iPhone 3GS2.4inches 62.1mm4.5inches 115.5mm3.5-inch320 x 480@1x320 x 480163
iPhone 4(S)2.31inches 58.6mm4.5inches 115.2mm3.5-inch320 x 480@2x640 x 960326
iPhone 5C2.33inches 59.2mm4.9inches 124.4mm4-inch320 x 568@2x640 x 1136326
iPhone 5(S)2.31inches 58.6mm4.87inches 123.8mm4-inch320 x 568@2x640 x 960326
iPhone 62.64inches 67.0mm5.44inches 138.1mm4.7-inch375 x 667@2x750 x 1334326
iPhone 6+3.06inches 77.8mm6.22inches 158.1mm5.5-inch414 x 736@3x1242 x 2208401

页面宽高

4933701-4823c56be5cd9ac5.png
页面宽高
  • 页面可见区域宽高：document.body.clientWidth || document.body.clientHeight
  • 页面正文区域宽高：document.body.scrollWidth || document.body.scrollHeight（包含滚动条长度）
  • 页面被卷左上区域：document.body.scrollLeft || document.body.scrollTop

视区 Viewport

通俗来说视区Viewport就是浏览器上用来显示页面的区域，也就是说，浏览器的实际宽度和手机宽度不一样，无论手机宽度是320px或640px，在手机浏览器内部宽度始终会是浏览器本身的视区。

4933701-504a22a0f9e82049.png
视区

现代浏览器都会给自身的视区提供一个默认值，大多会以980px或1024px为主。在移动端视区默认一般来说是会大于手机屏幕的，所以当在桌面浏览器正常显示的页面，会以960px设计主区域。放到移动端就会出现横向滚动条，因此会专门会给浏览器设计移动端的页面。

移动端浏览器会将页面放在一个虚拟的窗口viewport中，通常这个虚拟的窗口会比屏幕宽，这样就不用将每个页面挤到很小的窗口中，以防止破坏没有针对手机浏览器优化的网页布局，用户可以通过平移或缩放来查看页面中的不同部分。

页面中视区viewport是可绘制的区域，虽然视区的可视面积和屏幕尺寸相匹配，但视区页由自己的尺寸，用来确定页面中的像素数量。

在iPhone和Android平台中WebKit内核的历览器使用980像素宽的视见区或逻辑尺寸，相当于viewport中的width=980px。当页面加载后，页面内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放的非常小且不可读。

在Web页面中，可通过JS动态获取相关参数。

// 获取布局视口宽度
document.documentElement.clientWidth

// 获取展示视口即浏览器可视区域宽度
window.innerWidth

// 获取设备像素比DPR
window.devicePixelRatio

根据目前市场主流移动终端，统计设备独立像素后，移动端H5设计稿推荐尺寸为640 x 1136、750 x 1334。

  • 背景图片采用background-size:cover实现
  • 设计稿不要将重要内容放在太偏下或偏上位置

除去浏览器全屏显示，几乎所有情况下均会存在顶部状态栏和导航栏。根据iPhone标准，状态栏和导航栏的独立像素高度分别为40px和88px。Android平台可以更改状态和导航栏高度可取默认值48px和100px为准。在网页中就会将页面内容向下挤入盲区，根据不同的布局方式可能会挤出视口，也就是可视区域之下。因此取两个平台的最大值148。因此设计稿要尽量保证单页下没有重要内容。如果要在所有屏幕上将重要内容显示完全，需要注意市面上存在的小尺寸屏幕，绝对部分智能机分辨率在640 x 960之上，因此只要重要内容放在盲区之上即可。计算出的最安全高度为812 = 960 - 148。

视区分类

简单来说视区Viewport是严格等于浏览器的窗口，在桌面浏览器中视区就是浏览器窗口的宽高，但在移动设备上由于视区太窄，为了更好的为CSS布局服务，所以提供了两个视区，分别是可见视区Visual Viewport和布局视区Layout Viewport。

4933701-999616eaa954f6c9.png
视区
  • 布局视区Layout Viewport

如果将移动设备浏览器的可视区域设置为Viewport，某些网站会因为Viewport太窄而显示错乱，所以浏览器会默认将Viewport设置为一个较宽的值，比如980px，使得为桌面浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的Viewport也就是Layout Viewport布局视区。布局视区的宽度可以使用JavaScript的document.documentElement.clientWidth获取。移动设备中默认的视区就是Layout Viewport。

4933701-eee60176cfad7479.png
浏览器内置布局视区宽度
  • 可见视区 Visual Viewport

布局视区的宽度是大于浏览器可视区域的宽度的，因此需要一个Viewport来表示浏览器可视区域大小，这个Viewport也就是可见视区Visual Viewport，可见视区可使用JavaScript的document.documentElement.innerWidth获取。

视区设置

<meta 
name="viewport" 
content="
width = [pixel_value | device-width],
height = [pixel_value | device-height],
initial-scale = float_value,
minimum-scale = float_value,
maximum-scale = float_value,
user-scalable = [yes | no],
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>
  • width = device-width 视口宽度，device-width表示设备屏幕宽度。
  • height = device-height 视口高度，device-height表示设备屏幕高度。
  • initial-scale = float_value 视口初始缩放比例，取值范围[0.0 - 10.0]，为1时表示原始尺寸。
  • minimum-scale = float_value 视口最小缩放比例，取值范围[0.0 - 10.0]，为1时表示原始尺寸。
  • maximum-scale = float_value 视口最大缩放比例，取值范围[0.0 - 10.0]，为1时表示原始尺寸。
  • user-scalable = [yes | no] 用户是否允许调整缩放比例
  • target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 用于改变设备的默认缩放，medium-dpi是默认值。

完美视区 Ideal Viewport

Ideal Viewport是一个能完美适配移动设备的Viewport，首先无需缩放和横向滚动条就能正常查看页面所有内容，其次显示的文字、图片大小合适。比如14px的文本不会因为一个高密度像素的屏幕而显示的太小或无法看清。无论在何种密度屏幕、何种分辨率下，显示出来的大小都差不多，这个Viewport也就是Ideal Viewport。

Ideal Viewport并没有一个固定的尺寸，不同的设备拥有不同的尺寸。比如在IPhone设备中Ideal Viewport宽度是320px，无论屏幕宽度是320还是640的。Ideal Viewport的意义在于，无论在何种分辨率下，针对Ideal Viewport而设计的页面无需缩放和横向滚动条都可以完美地呈现给用户。

移动设备中默认的视区是Layout Viewport，在进行移动设备页面开发时则需要Ideal Viewport。要得到完美视区，需设置meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

该meta标签的作用是让当前视区宽度等于设备宽度，同时不允许用户手动缩放。minimum-scale=1.0与maximum-scale=1.0并不是必需的。但width = device-width则是必须的，以保证不会出现横向滚动条。

width能够控制默认布局视区Layout Viewport的宽度，若不指定则默认会是980px或1024px，这个值会由设备自身所决定。当把布局视区宽度设置为移动设备宽度width = device-width时，此时布局视区将会变成完美视区。

其实要将当前视区宽度设置为完美视区宽度，既可以设置width = device-width也可以设置initial-scale = 1.0，但是单单设置width = device-width会导致iPhone、iPad设备中横竖屏不分，单单设置initial-scale = 1.0则会导致IE中横竖屏不分。所以都以竖屏的完美视口宽度为标准，最完美的写法时两则都写上去，width = device-width解决iPhone、iPad缺陷，initial-scale = 1.0则解决IE的缺陷。

视区单位 vm & vh

CSS3新增视区单位vm和vh，在移动端iOS8+和Android4.4+获得支持。

  • vm视区viewport宽度的1/100，即1vm等于视区宽度的1%。
  • vh视区viewport高度的1/100，即1vh等于视区高度的1%。
  • vmin表示选取vm和vh中最小的那个
  • vmax表示选择vm和vh中最大的那个
4933701-e99b1b0a02d09135.png
视区单位

设备像素比 DPR

设备像素比定义了物理像素与设备独立像素之间的对应关系，计算公式为：设备像素比 = 物理像素 / 设备独立像素。

在CSS中可通过以下方式进行媒体查询，针对不同DPR设备做出样式适配。

-webkit-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio

在JavaScript中可通过window.devicePixelRatio获取当前设备的DPR。

window.devicePixelRatio

在Ratina高清设备屏幕中一个CSS像素对应4个物理像素

  • 普通屏幕：1个CSS像素对应1个物理像素（1:1）
  • Retine屏：1个CSS像素对应4个物理像素（1:4）
4933701-8d148302415d2497.png
DPR

Web页面设置视口后，页面与屏幕是1:1显示，移动设备都具有设备像素比DPR，当DPR=2时移动设备上的一个CSS像素由4个物理像素点组成。

  • dpr = 1 如PC端，则html的font-size为50px，此时 1rem = 50px， viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都为 “1.0” 。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • dpr = 2 如iPhone 5 和 6，则html的font-size为100px，此时 1rem = 100px， viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都为 “0.5” 。
  • dpr = 3 如iPhone 6 sp，则html的font-size为150px，此时 1rem = 150px； viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都为 “0.3333333333”。

安卓客户端限制了 viewport 设置的缩放属性，让客户端放开限制就行，但是由于市场上的app版本还是不支持，所以需要做兼容性处理。

iPhone6 上有1px 的滚动条，最后处理方案是通过 viewport 中的 maximum-scale 的值加了0.1，由于设置了user-scalable=no，maximum-scale 的值加0.1并不会有什么影响。

通过JS动态获取移动设备的设备像素比，通过设备像素比来计算并设备Web页面中html标签的字体大小font-size以及缩放比例。

例如：动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。

'use strict';

/**
 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;  
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;
  // 自动设置viewport
  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  // 默认dpr=2时html的font-size=100px，这样1rem=100px利于px和rem之间的转换。
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};

REM

rem全称font size of the root element是指相对于根元素的字体大小的相对单位，计算规则依赖于根元素。

rem是通过根元素进行适配的，web中根元素是指html，所以通过设置html的字体大小即可控制rem的大小。

REM布局的核心是设置好根html元素的字体大小font-size，为了防止在高清屏下像素不够用而导致模糊，当拿到移动设计稿时，移动设计稿一般会以iPhone5设备宽320px或iPhone6设备宽375px为基准，制作出两倍宽的设计稿，即640px或750px。

例如：设置html标签的font-size:10px，6rem即6*10px。

html{
  font-size:10px;
}
.btn{
    width:6rem;
    height:3rem;
    line-height:3rem;
    font-size:1.2rem;
    border-radius:.5rem;
    display:inline-block;
    background-color:#06c;
    color:#fff;
    text-decoration:none;
    text-align:center;
}

rem适用于WebApp，出于兼容性考虑，WebApp下使用rem更加能凸价值和功能。

屏幕宽高宽高比根字号元素像素宽度元素REM宽度
3200.510px100px10rem
3840.612px120px10rem
4800.7515px150px10rem
640120px200px10rem

使用CSS的媒体查询控制

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

移动UI设计稿会采用iPhone宽度作为标准

  • 设计稿基于iPhon4/5 横向分辨率为640 页面body元素的width为 640 / 100 = 6.4rem
  • 设计稿基于iPhon6 横向分辨率为750 页面body元素的width为 750 / 100 = 7.5rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

使用JS控制Web页面文字大小使其自适应屏幕

//Chrome包括其内核的webview有最小字体12px的限制，建议以1080px宽度下100px作为1rem基准，以10px为基准缩放程度极其有限
(function(doc, win){
    var docEl = doc.documentElement,
        resizeEvent = "orientationchange" in window ? "orientationchange" : "resize",
        resizeHandler = function(){
            var clientWidth = docEl.clientWidth;
            if(!clientWidth){
                return;
            }
            // 根据设计调整
            docEl.style.fontSize = 20*(clientWidth/320) + "px";
        };
    //添加事件
    if(!doc.addEventListener){
        return;
    }
    win.addEventListener(resizeEvent, resizeHandler, false);
    //注册了document的'DOMContentLoaded'事件，使得打开网页时在内容加载完之后才改变rem。
    doc.addEventListener("DOMContentLoaded", resizeHandler, false);
})(document, window);

使用rem布局的本质是等比缩放，一般是基于宽度。

将屏幕宽度均分100份，每一份的宽度使用x表示，即x=屏幕宽度/100，如果将x作为单位，x前面的数值代表屏幕宽度的百分比。想要屏幕元素随着屏幕宽度等比缩放，只需要确定x单位，可通过CSS3中的rem来实现。可通过JS设置HTML字体大小等于屏幕宽度的百分之一。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + "px";

若UE设计稿宽度尺寸为640px，设计稿中某元素宽度为100px，则可以计算出100 / 640px * 100px = 15.625。

设计稿宽度设计稿元素宽度页面宽度页面根元素字体大小页面元素宽度
640px100px640px640px / 100 = 6.4px6.4px * 15.625 = 100px
480px75px480px480px / 100 = 4.8px4.8px * 15.625 = 75px
320px50px320px320px / 100 = 3.2px3.2px * 15.625 = 50px

最佳实践：px2rem移动端自适应方案 https://github.com/imochen/hotcss

EM

字体大小不能使用rem，因为字体大小和字体宽度并不是线性关系，所以字体大小不能使用rem。由于设置根元素字体大小会影响所有没有设置字体大小的元素，因为字体大小是会继承的，可以在body上做字体修正。

如何实现字体的响应式，可通过修改body字体大小，同时设置字体大小使用em单位。

媒体布局

弹性布局Flex

JunChow520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS设计指南---页面布局
weixin_40794404的博客
06-29 1815
CSS设计指南—页面布局 教材：CSS设计指南 实现多栏布局 三种方案： 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。 流动： 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。 弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了
页面布局
weixin_44565319的博客
01-18 209
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 ...
页面布局与样式设计：从基础到进阶
最新发布
喔的嘛呀的博客
06-24 621
在网格容器中，我们可以定义网格项，这些项将按照我们定义的网格布局进行排列。.item {在Flex容器中，我们可以定义Flex项，这些项将按照我们的布局要求进行排列。/* 自动扩展剩余空间 */
css的6大布局方式
云天明的博客
04-18 1543
总共有6大布局方式双飞翼、多栏、弹性、流式、瀑布流、响应式布局 （1）、双飞翼布局  经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点： a、三列布局，中间宽度自适应，两边定宽；  b、中间栏要在浏览器中优先展
RP页面布局
04-08
通过快速原型工具，可以快速构建出不同版本的页面布局，进行用户测试，找出最佳设计方案。页面布局.rplib可能是某种快速原型工具保存的库文件，包含了多种预设的布局模板，方便产品经理在设计过程中直接引用和修改。...
div页面框架布局
06-30
EasyUI是一个基于jQuery的用户界面库，提供了丰富的组件和布局方案，使得开发者能够轻松创建出响应式且兼容性强的网页。在这里，我们深入探讨一下div布局和EasyUI在页面布局中的应用。 首先，`div`是HTML中的一个...
Bootstrap页面布局基础知识全面解析
09-02
在本篇文章中，我们将深入探讨Bootstrap的基础页面布局概念，帮助你更好地理解和应用这个强大的框架。 首先，Bootstrap的核心特性之一就是其响应式布局。响应式布局意味着网页的设计能够根据用户的设备类型（如手机...
常见布局方案
03-13
随着CSS3新特性的引入，如Flexbox和Grid布局，开发者有更多的工具来创建响应式和灵活的页面布局，但基本的布局原理依然适用。在实际工作中，选择合适的布局方案应考虑项目的具体需求、兼容性和性能等因素。
拉钩网页面布局模板
03-17
拉钩网作为国内知名的互联网职业招聘平台，其页面布局模板对于网页设计师和前端开发者来说具有重要的参考价值。在设计和构建一个高效、易用且吸引用户的网页时，页面布局是至关重要的因素。以下将详细讨论拉钩网页面...
web div页面布局·
12-22
web div页面布局 垂直布局
浏览器布局（算法设计）
03-29
布局技术为浏览器中页面元素的完美呈现提供了一种实现机制，在浏览器具体的实现过程中，所有页面元素在屏幕上都表示为矩形区域，布局排版的过程就是将这些大小不等的矩形，按照一定规则顺序摆在正确的位置上。主要为算法的设计
页面布局解决方案
漫天随飞雪的博客
03-24 318
页面布局：1：浮动解决方案；2：绝对定位解决方案；3：flexbox解决方案；4：表格布局解决方案；5：网格布局解决方案
页面的基本布局
qq_42765662的博客
06-29 1131
页面的基本布局方式，盒子模型。
移动WEB的页面布局
没做过产品的后端不是个好前端
05-19 214
随着移动互联网的日益普遍，现在移动版本的web应用也应用而生，那么在做移动web页面布局的过程中，应该注意哪些要点呢？现把个人的一些学习经验总结如下： 要点一、piexl 1px = 2dp dp dpr dpi ppi 要点二、viewport ios的viewport为980px 布局：layout viewport 视图：visual viewpo...
常见的页面布局
weixin_44631780的博客
06-12 602
#常见的网页布局 ##0. 注意项。 ##1. 三角形 ##2. 新闻列表。 ##3. 侧边栏导航。
CSS——网页的布局方式
Guizy
12-15 1904
目录 网页布局方式 标准流排版方式 浮动流排版方式 定位流排版方式 网页布局方式 跳转到目录 什么是网页的布局方式? 就是浏览器如何对网页中的元素进行排版. 标准流(文档流/普通流)排版方式 浏览器默认的排版方式就是标准流排版方式 在CSS中将元素分为三类, 分别是块级元素 行内元素 行内块级元素 标准流中有两种排版方式,一种是垂直排版 一种是水平排版 垂直排版如果元素是块级元素...
给我一个包括定位相关的属性、CSS页面布局方案（多列、表格）、函数、变量、规则相关知识及实验过程的知识总结及扩展。（定位相关的属性、CSS页面布局方案（多列、表格）、函数、变量、规则）的简单的html网页代码
05-24
以下是一个包括定位相关的属性、CSS页面布局方案（多列、表格）、函数、变量、规则相关知识及实验过程的知识总结及扩展的简单 HTML 网页代码： ```html <!DOCTYPE html> <title>CSS知识总结及扩展 /* 定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值