发表于: 2019-03-30 21:36:25

1 741


今天完成的事情:

   查找了一些任务14 15的资料了解了什么是组件库,任务14 15 进行中
明天计划的事情: 

      继续任务14  15  ,
遇到的问题:

     布局问题,有点懵,因为任务14   15 是用新的布局重写任务8,因为任务8用的是bootstrap框架,

所以到了任务14 不用bootsrap很懵逼,问了师兄,他们说要建组件,下载了bootstrao 后来创建组件

的时候找不到位置,原来版本下错了,很尴尬,

      问题思考:

 刚开始不明白什么是组件,以为任务14 15  还要用bootstrap框架,后来发现理解错了,需要用新的布局

方式去实现,也可以用Bootstrap里面的内容,但是不能引cdn,把要用的框架 生成组件引到Html里面。

 总之就是很懵逼,还在理解中。

收获:

简单了解了什么是组件,生成组件的好处,还需要多看和查找资料。


任务13总结:

  首先就是对csss 混合器,继承器的熟练运用:

  然后就是对侧边栏的了解运用,侧边栏,首先是一个点击效果,

利用input和lable做一个点击效果,实现侧边栏,方式网上有,但是理解起来有点难度,

需要自己去不断演示,推测,改变,最后在处理,实现自己想要的结果。

  任务耗时 3天。

      深度思考:

第一如何做默认样式重置?resetting 和 normalizing 之间有什么区别?

  

默认样式重置出现的原因:

在日常生活中常用的几个主流浏览器中, 当我们没有给html元素设置样式时,这些浏览器会根据自己的默认样式对html元素进行布局,但是由于每个浏览器的默认布局样式不同, 会导致元素的展示方式出现差异,从而使同一页面在不同浏览器中的展示出现差异。使用CSS样式重置这一方式,就可以使网页展示效果保持 一致。


1: css reset

css reset的功能就是把网页标签样式使用 css 重置。html 标签是有它默认的样式的,例如:<h2>标签表示标题,通常会对文字进行加粗,并且会让文字变大;<p>是段落标签,表示一个段落,通常会与其他文字空开一段距离。

内核不同的浏览器,它对于网页标签的解析是不同的。比如,a标签添加链接后,在chrome里点击的时候显示红色。在edge里点击则不会显示红色。这样,同一个网页,在不同浏览器的浏览下,就会发生较大的区别,可能在某浏览器中是正常的,在另一个浏览器中,就不正常了。不同浏览器的默认样式可能会干扰我们实际想要的效果,所以我们需要一个确定的、一致的、跨浏览器的默认样式作为基础,这就是为什么要使用CSS重置。


目前在网络上,已经有很多关于cssreset的框架,例如雅虎的 YUI 等,我们可以下载下来看看他们是怎么写的,是怎么处理的。同时也可以直接在网页中引用。但是对于小的页面,并不推荐这种做法,那些大的框架,适合大型网站使用,里面几乎对所有的html标签进行了css reset,而我们制作的小页面,并不需要太多的标签,如果使用那么多无用的css reset代码,会导致页面体积变大。推荐的做法是,根据自己页面用到的标签,去寻找相应的css reset代码。

1: normalize.css

normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

特点:

1.保护有用的浏览器默认样式而不是完全去掉它们

2.一般化的样式:为大部分HTML元素提供

3.修复浏览器自身的bug并保证各浏览器的一致性

4.优化CSS可用性:用一些小技巧

5.解释代码:用注释和详细的文档来

第二任务13所学到的架构知识,和任务12所学到的规范有没有冲突的地方?如果有冲突,你会选择哪种方式?为什么?

我感觉是没有什么冲突的,基本上用的框架结构都差不多,

如果有冲突的情况下,我会用自己的方式去解决,因为每个人的逻辑思维都一样,很明显都存在大同小异,过程不重要,我们只看结果。

第三移动端有哪些常见布局方式?

1: 就是固定布局:

固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

2:流体布局

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性。换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸。

3:flex布局

flex会经常用到,也称为弹性布局,他会根据页面的剩余宽度自动分配空间,

4:栅格布局

bootstrap是一个比较流行的响应式前端框架,利用bootstrap的栅格系统可以实现响应式的移动端布局。

第三固定宽度布局开发WebApp如何实现多终端下自适应?

visual viewport的概念:

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。

layout viewport的概念:

简单的说,包含整个页面内容的那个区域

可以这样理解:有一张大白纸,白纸上面放置的就是html、body、div这些元素。这张大白纸就是layout viewport。

layout viewport的功能是用来约束你网站中最顶级包含块元素(containing block)html的。html的默认宽度是layout viewport宽度的100%

ideal viewport的概念:

就是给移动端屏幕的一个用于设置layout viewport的参考值,这个值是生产厂商给的。如果layout viewport的宽度等于ideal viewport 的宽度,屏幕上的文字、图片(当它们以px为单位时)的大小看起来就会很恰当。(或者说在不同设备上看到的10px的物理上的长度是相同的) 例如iphone 5的ideal viewport是宽度320px,iphone 6的宽度是375px。

我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

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

name="viewport" content="width=device-width"———把当前的viewport宽度设置为ideal viewport的宽度。

width=device-width ——设置layout viewport的宽度,为一个正整数,或字符串"width-device"

initial-scale ——设置页面的初始缩放值,为一个数字,可以带小数

minimum-scale ——允许用户的最小缩放值,为一个数字,可以带小数

maximum-scale ——允许用户的最大缩放值,为一个数字,可以带小数

user-scalable ——是否允许用户进行缩放,值为"no"或"yes", no代表不允许,yes代表允许

target-densitydpi: 值可以为一个数值或high-dpi、medium-dpi、low-dpi、device-dpi这几个字符串中的一个

注意:当target-densitydpi=device-dpi时,css中的1px会等于物理像素中的1px。






返回列表 返回列表
评论

    分享到