做webapp静态页面的一些积累
1)根据pad,手机不同的版本的屏幕大小设置字体的大小(可以使用此方式根据屏幕的不同进行设置,由于我左边的图片是设置的float='left',使用的是img标签的百分比来显示图片)
(使用此方式,有可能会造成各个设置的屏幕的范围会互相影响,要注意每个范围的加载顺序,因此我的布局 就宽度设置百分比,高度设置了具体的值,字体就稍微设置了小点)
(网上看了很多关于字体随页面的大小而改变的文章,关于处理谷歌默认的最小字体是12px,我试了很多但是都不支持,
PC桌面版Chrome 27正式取消了-webkit-text-size-adjust:none;属性的支持,
这种方式会改变字体的大小,但是它一行的字数也没改变,如下:
@media screen and (min-width:320px) and (max-width: 568px){
p{ font-size:12px;
-webkit-transform-origin-x: 0; //离左边框的距离
-webkit-transform: scale(0.75); }
img{width:135%}
}
)
12×0.75=9,对于其它浏览器来说,12px以下的字号都是可以识别的,这里仅需要对于Chrome浏览器进行缩放。
@media screen and (min-width:768px) and (max-width:1024px){
p{font-size:14px;}
img{width:90%}
}
@media screen and (min-width:375px){
p{font-size:12px;}
img{width:120%}
}
@media screen and (max-width: 640px){
p{font-size:12px;}
img{width:100%}
}
做webapp静态页面的一些积累的更多相关文章
- 做HTML静态页面时遇到的问题总结
1. 如果所示,问题:“首页”和“闲置”文字部分位于table中部 解决方法:需要取消vertical-align:middle属性,将其设置为vertical-align:top,并将文本的高度改为 ...
- 用Razor做静态页面生成器
本来是用asp.net webpages做的博客网站,数据库用了一个陌生的本地数据库,只是觉得用起来很爽快,用新鲜的东西有一种刺激.后来数据库挂了,估计是存某个字段的时候出了问题,可是新鲜的东西,也不 ...
- 如何做URL静态化 和页面的静态化
为什么要进行URL静态化? 如果帮到了您,您可以小支持一下,谢谢您 1.更好的迎合搜索引擎工作原理的爬行抓取机制:2.把网站URL静态化更有助于网站获得好的排名:3.URL静态化有利于用户体验.不 ...
- HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
- 静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样: <!-- index.php --> <!DOC ...
- Spring Boot (4) 静态页面和Thymeleaf模板
静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources /ME ...
- shiro 静态页面资源不显示 解决方案(转)
最近做一个ssm+shiro的框架整和 不加shiro之前ssm中css和图片显示正常.加上以后无法显示. 解决方案: shiro有静态资源过滤. 配置资源匿名访问即可 <property na ...
- SSM 返回静态页面HTML Controller 被递归调用引起的StackOverflowError
一 背景 最近在做工程实践,想实现这么一个效果: 前端url请求地址:localhost:8080/idevtools/search 后端返回一个静态页面HTML:search.html 按照网上说的 ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
随机推荐
- IntelliJ IDEA 中文乱码问题解决办法
自己最近在使用IntelliJ IDEA,发现总是出现中文乱码的问题,在网上找了很多教程,发现真是“天下文章一大抄”.还不如自己动手试着解决一下. 1.编辑器以及调试信息中文乱码问题 解决方案: 选择 ...
- 慕课网-Java入门第一季-7-1 如何定义 Java 中的方法
来源:http://www.imooc.com/code/1577 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法 ...
- (转)You might not need jQuery
You might not need jQuery You certainly can support IE 9 and below without jQuery, but we don't. Ple ...
- mongoDB数据库
1.mongoDB简介:mongoDB 为非关系数据库,集合(collection)关系数据库中的表,中存储的为json结构的文档,集合中的每一条记录都可以结构不同, 但必须都有_id字段(mongo ...
- Linux CentOS安装postgresql 9.4
一.前言 PostgreSQL通常也简称Postgres,是一个关系型数据库管理系统,适用于各种Linux操作系统.Windows.Solaris.BSD和Mac OS X.PostgreSQL遵循P ...
- Chrome Dev Tools :成为更高效的开发人员
原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...
- mysql 导出csv
SELECT order_id,product_name,qty FROM ordersINTO OUTFILE '/tmp/orders.csv'FIELDS TERMINATED BY ','EN ...
- char wchar 互转 多字符 宽字符 的N种方式
1: 用 CString 如果没有mfc 可以用 ATL 中的 CString #include <atlstr.h> CStringA v1 = "111&quo ...
- 让window.close不提示:您查看的网页正在试图关闭窗口。是否关闭此窗口?
正常来说,当我们调用window.close来关闭从地址栏中打开的窗口时,IE会弹出提示说:您查看的网页正在试图关闭窗口,是否关闭此窗口? 你可以将window.close替换成下边的脚本,然后再测试 ...
- pdf 切割成圖片的方法
/// <summary> /// 将PDF文档转换为图片的方法 /// </summary> /// <param na ...