web前端基础篇⑨

时间:2023-01-13 07:34:12

1.web端、app端 目前实现响应式布局,主要用以下两种方式。
CSS原生代码响应式布局 @media screen。
bootstrap移动设备优先、自带框架。

兼容性 用原生代码的话 根据不同的屏幕尺寸,用@media screen引入不同的值
用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据。
web和app图不能相同,为了浏览速度最好使用雪碧图。

APP端。
CSS原生代码写 需要注意:①宽高,使用百分比的方式。
②宽的话,使用rem,不能在一套css里面使用两个单位,使用rem,最好用百分比。
③@media screen格式
④margin padding建议也用百分比
⑤meta viewport一定要加。允许(不允许)用户缩放
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

web前端基础篇⑨的更多相关文章

  1. web前端-基础篇

    该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...

  2. web前端基础篇⑧

    1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...

  3. web前端基础篇①

    html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...

  4. web前端基础篇⑩

    1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...

  5. web前端基础篇⑦

    1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...

  6. web前端基础篇⑥

    LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...

  7. web前端基础篇⑤

    1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...

  8. web前端基础篇④

    1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...

  9. web前端基础篇③

    1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loo ...

随机推荐

  1. Web前端开发的前景与用处

    随着时代的发展,现在从事IT方向的人有很多,所以励志要成为前端开发工程师的人有很多.当然也有很多人在犹豫不知道该从事哪个方向,我今天就是来给大家分析一下Web前端开发的前景.包括工作内容,发展前景和薪 ...

  2. git diff获取差异文件中文乱码的解决办法

    通过git的diff命令对两个commit id的版本进行差异化的对比.中文文件时出现乱码. git diff 6bded8d0c1fe1746c122121217dc0c88667091089 a9 ...

  3. Android百分比布局支持库介绍——com&period;android&period;support&colon;percent(转)

    转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...

  4. PHP 可变长度参数列表

    In PHP 5.6 and later, argument lists may include the ... token to denote that the function accepts a ...

  5. Web Forms vs Web MVC

    MVC相对于WebForm来说更难学习,但性能优于WebForm,比较适合大型项目,开发成本较高,但耦合度低,易于维护,没有太多的现成控件,开发效率较低.对WebForm有基础的人反而不太容易学MVC ...

  6. 使用 JWT 生成 Token 代码示例

    JSON Web Token,简称 JWT, 是一个开放的标准(RFC 7519),它定义了以一种紧凑的.自包含的 JSON 对象在各方之间安全传输信息的方式.该信息含有数字签名,可以被验证和信任. ...

  7. d3&period;js做的柱状图

    window.onload = function(){ var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; var height = 400,w ...

  8. Android导出数据库文件

    由于Android系统权限问题,直接用Android Studio 的Device File Explorer无法查看墨人生成的*.db文件,不过可以通过adb命令获取到: adb pull /dat ...

  9. Perl中的执行上下文

    perl中的上下文 在perl中,很多地方会切换上下文.所谓上下文,它的重点在于同一个表达式出现在不同地方,得到的结果不同.换句话说,同一个表达式,它表达的值不是固定的.这就像是同一个单词,在不同语境 ...

  10. Codeforce 294A - Shaass and Oskols (模拟)

    Shaass has decided to hunt some birds. There are n horizontal electricity wires aligned parallel to ...