2016.9.25 Miscellaneous notes on learning details
正常情况下 使用bootstrap 比原生代码 写响应式布局更快
补充上一文《bootstrap的实际应用》:
bootstrap的lang :<html lang="zh-CN"> 之前班上很多同学忘了改这个 原生的lang为 <html lang="en"><br>由于bootstrap本质是已经写好了固定的css的样式 所以要修改从bootstrap复制过来的内容时 请在 例如:
<button type="button" class="btn btn-default" style="height: 1.875rem;border: none;">微信登录</button> 里修改 也就是 内联<br>才会起作用 如果你自己本身用的外联link XXXX 的css样式想去修改bootstrap复制过来的某个东西时 起不了作用
web端 必做兼容性 适应各种浏览器 可能有几套图 经常使用雪碧图
app端 有不同的屏幕尺寸 且必须进行自适应{ @media srceen 或者 bootstrap 或者 JS } 也经常使用雪碧图
* 雪碧图 可以提高网页加载速度 多图整合为一张
* 做自适应 宽必须为百分比 高度尽量也用百分比 不可避免的情况下 用rem margin、 padding 最好用百分比 其次 rem
* 移动端必须加 meta viewport
不允许用户缩放
手机各个屏幕尺寸下的fontsize 大小换算
@media screen and (min-width: 1242px){html{font-size: 38.8125px;}}
@media screen and (min-width: 960px){html{font-size: 30px;}}
@media screen and (max-width: 750px){html{font-size: 23.4375px;}}
@media screen and (max-width: 640px){html{font-size:20px;}}
@media screen and (max-width: 414px){html{font-size:12.9375px;}}
@media screen and (max-width: 360px){html{font-size:11.25px;}}
@media screen and (max-width: 320px){html{font-size:10px;}}
使用图片时 用div包裹img 不能直接甩img裸在body
优雅降级
一开始在兼容性好的浏览器做网页 在慢慢做 兼容性差的浏览器的适应
逐渐增强
一开始做好所有 浏览器 屏幕的适应 不过只做了基本功能 后来再慢慢填充内容
bootstrap中container 定宽度100%
如果 导航 和 尾部 应用了position fixed 属性 那么 中间内容部分 排版定位时 不要使用 定位 用margin或者padding去撑距离 否则 用定位的那个元素 会呈现在 做过fixed的导航上方 遮挡住导航 absolute 和 relative 都不能使用 结果可自行测试.....

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
