web前端李传玥极速搭建官网-“有你”

李传玥

2019.09.27

75人浏览

利用主流div+css布局,json模拟数据,ajax获取对应数据,动态生成,渲染对应的数据

主流DIV+CSS布局极速搭建页面结构

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,user-scalable=no" 然后再进行固定尺寸的px设计? - 前端开发)

优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。

缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。

当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

web前端李传玥极速搭建官网-“有你”

web前端李传玥极速搭建官网-“有你”

web前端李传玥极速搭建官网-“有你”

1.如果只做pc端,那么静态布局(定宽度)是最好的选择;

2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;

3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

地址:http://nzndwyt.top/you/index.html

李传玥    65 四川省阿坝藏族羌族自治州汶川县 设计师杨冰是女孩 1996.04.13
设计师啪啪网2019版