Вторник, 21 Марта 2023, 17:21

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум игроделов » Движки для разработки игр и сложные системы разработки » Движки для браузерных игр » Сайт под разные разрешения экранов
Сайт под разные разрешения экранов
SaiteiДата: Воскресенье, 29 Июля 2012, 13:11 | Сообщение # 1
старожил
Сейчас нет на сайте
Как сделать? Слышал про резиновые сайты, мне даже показывали. Не умею. Вот у меня разрешение экрана 1920х1080, а хочу чтобы моя браузерная игра в будущем выглядела нормально и, скажем, при маленьком разрешении 800х480. Что делать? Хотелось бы мне не тупить и сразу же начать нормальную разработку, учитывая разные разрешения экранов...

Добавлено (29.07.2012, 13:11)
---------------------------------------------
p.s. и чтобы всё содержимое блоков (текст, картинки) + сами блоки под разрешение подстраивались. Помогите пожалуйста. С меня большой плюсик)

JumpZ(noob)Дата: Воскресенье, 29 Июля 2012, 13:49 | Сообщение # 2
почетный гость
Сейчас нет на сайте
ну вот смотри если у тебя задний он с цвета то попробуй вот так
Code
background-color: #eee; // здесь любой цвет

а если задний фон хочешь чтоб был с картинкой то вот так

Code
    background: url(ПУТЬ К КАРТИНКЕ);   
     margin: 0 auto;
     width: 900px;//здесь можешь ставить любой параметр к примеру 100% это будет реальное изображение картинке в реальных размерах

ещё есть такая штука как фиксация изображения вот пример
Code
background-image: url('ПУТЬ К КАРТИНКЕ');/* Цвет фона */
left: 0.5%;
top: 1%;
position: fixed;
width: 99%;
height: 80%;

biggrin


Skype: a-x-i-t-o
MrAkakuyДата: Воскресенье, 29 Июля 2012, 13:53 | Сообщение # 3
участник
Сейчас нет на сайте
Надо где размер вместо кол-во пикселей писать в процентах. Например, левый фрейм 20%, правый тоже 20. Среднее поле 60. Тогда, когда ты будешь открывать на экране с меньшим разрешением, тест просто сожмется. Пример (зеленым цветом обвел):





Сообщение отредактировал MrAkakuy - Воскресенье, 29 Июля 2012, 13:54
JumpZ(noob)Дата: Воскресенье, 29 Июля 2012, 14:01 | Сообщение # 4
почетный гость
Сейчас нет на сайте
MrAkakuy,
между <body></body> вставляешь где угодно это <div class='text'> например
Code

<div class='text'>Рекламные программы Решения для бизнеса Политика конфиденциальности и Условия использования Google+ Всё о Google Google.com
<div>

и в файл со стилем вставляешь вот это
Code
}.text{     
      font-size: 12;
      color: #FFF;                    /* text */
      padding-top: 10px;       
      padding-left: 10px;   
}


Skype: a-x-i-t-o


Сообщение отредактировал JumpZ(noob) - Воскресенье, 29 Июля 2012, 14:01
MrAkakuyДата: Воскресенье, 29 Июля 2012, 14:03 | Сообщение # 5
участник
Сейчас нет на сайте
JumpZ(noob), не не, мне можешь не рассказывать biggrin
Я html уже год не видел и видеть не хочу. Просто написал что читал раньше и как сам делал happy

ПИ СИ : и ты показал как такой текст через CSS сделать. А я показывал как текст подстраивается под размер экрана бравузера.





Сообщение отредактировал MrAkakuy - Воскресенье, 29 Июля 2012, 14:08
GECKДата: Воскресенье, 29 Июля 2012, 14:06 | Сообщение # 6
заслуженный участник
Сейчас нет на сайте
Гугли про адаптивную верстку, Люк.

Всё гениальное просто. И хреново работает.
SaiteiДата: Среда, 01 Августа 2012, 14:56 | Сообщение # 7
старожил
Сейчас нет на сайте
есть аналоги?
Сделал вот такую страницу:
Code
<?php
session_start(); //Начало сессии
include ("engine/mysql_connect.php");
include ("news.php");
include ("autform.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>         
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Saitei" />
<link href="style.css" type="text/css" rel="stylesheet">
<title>Моя MMORPG</title>
</head>
<body>
<table id="wrapper">
     <tr>
         <td id="left">Левая колонка</td>
         <td id="center">
         <h2 align="center">Главная страница</h2>
<p align="center"><img src="logo.png" width="auto" height="auto" alt="[Logo]" /></p>

     </p></form>
     <br>
     <br>
         </td>
         <td id='right'>
         <?php  
         vhod();
         ?>
         </td>
     </tr>
</table>
   <div align="center" id="niz">Project 31.07.2012 © Saitei</div>  
</body>
</html>


Code

body
{        

background-color:#FFEBCD;  
}
#reg
{
color:#B22222;
}
#wrapper
{             
height:100%;
width:100%;
margin:0;padding:0;
}
#left  
{      
width:20%;
}
#right
{                   
width:20%;
}
#center
{        
position:absolute;     
top:0%;        
width:60%;
}
#niz
{
position:absolute;
color:#8B8B83;
top:95%;
left:90%;
}
#login
{
border-width: thick;
border-style: double;
border-color: black;
background-color:#FFE4C4;
}


на 1280х1024 выглядит нормально. У меня 1920х1080... Тоже норм... Но все говорят что что-то не так. Что это плохой тон программирования О_о ?
JumpZ(noob)Дата: Среда, 01 Августа 2012, 16:02 | Сообщение # 8
почетный гость
Сейчас нет на сайте
Saitei, Попроси пускай тебе скрин сделают и ты поймешь в чем ошибка =)

Skype: a-x-i-t-o
SaiteiДата: Среда, 01 Августа 2012, 16:03 | Сообщение # 9
старожил
Сейчас нет на сайте
сделайте скрин, а? biggrin
да уже делали на 1280х1024, пофиксил. Работает же. Не знаю что не так...
JumpZ(noob)Дата: Среда, 01 Августа 2012, 16:04 | Сообщение # 10
почетный гость
Сейчас нет на сайте
вот у меня такая же проблема была, я попросил мне заскринили несколько человек и все потом понял в чем причина и исправил

Skype: a-x-i-t-o
SaiteiДата: Среда, 01 Августа 2012, 16:05 | Сообщение # 11
старожил
Сейчас нет на сайте
JumpZ(noob), ну а с кодом что не так?
JumpZ(noob)Дата: Среда, 01 Августа 2012, 16:29 | Сообщение # 12
почетный гость
Сейчас нет на сайте
щас гляну, вот у меня тоже прикол у меня менюшка напостой уезжает влево http://floomby.ru/s1/MgDxZ

Добавлено (01.08.2012, 16:29)
---------------------------------------------
я не пойму что там не так ?


Skype: a-x-i-t-o
SaiteiДата: Среда, 01 Августа 2012, 17:41 | Сообщение # 13
старожил
Сейчас нет на сайте
JumpZ(noob), картинку не вижу...

Добавлено (01.08.2012, 17:41)
---------------------------------------------

Quote (JumpZ(noob))
щас гляну, вот у меня тоже прикол у меня менюшка напостой уезжает влево

кстати какая менюшка? Я содержимое логина (блока такого) и картинки не давал
gmmmmДата: Среда, 01 Августа 2012, 17:58 | Сообщение # 14
почетный гость
Сейчас нет на сайте
Нагуглил вот-что:

Цитата из той статьи:
Quote
Обёртка вокруг всего документа.
Удобно использовать, чтобы контролировать ширину документа. Если «десктопная» ширина макета фиксирована, скажем 1000px, можно это записать так: #wrapper {max-width: 1000px}. И с точки зрения семантики это будет куда более правильным чем width:1000px (действительно, это же максимальная ширина блока)


Еще:
Quote
Гибридная верстка включает в себя все лучшее из двух вышеуказанных. Как правило(все зависит от верстальщика), сайт тянется только в определенных границах [А1хБ1; А3хБ2], а за их пределами верстка становиться фиксированной.


И еще:
Code
@media screen and (min-width: 400px) and (max-width: 700px) { … }


И еще:

Code
<link rel="stylesheet" media="screen and (max-width: 1921px)" href="style6.css" />


пусто!)
SaiteiДата: Среда, 01 Августа 2012, 18:41 | Сообщение # 15
старожил
Сейчас нет на сайте
gmmmm, запутал ты меня)
gmmmmДата: Среда, 01 Августа 2012, 19:03 | Сообщение # 16
почетный гость
Сейчас нет на сайте
Quote (Saitei)

запутал ты меня)


Ну чего не понятно я почитал статьи из поиска, нашел, что есть 3 вида верстки: резиновая, фиксированная, гибридная.

Гибридная сочетает в себе все лучшие качества из первых двух. Нашел вариант: не width:n%, а min-width и max-width.

А вообще почитай лучше статьи, из которых я брал цитаты. Запрос "верстка под разные разрешения экрана" в Яндекс.

Пример из русского мануала

Code
<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>Версия сайта для КПК</title>
   <style media="handheld">
    body {
     max-width: 320px; /* Максимальная ширина страницы в пикселах */  
    }
   </style>
  </head>
  <body>
   <h1>Текст заголовка</h1>
   <p>Текст примера</p>
  </body>
</html>


Поддерживает css > 2.

Синтаксис: max-width: значение | проценты | none | inherit


пусто!)
IGRAMENДата: Суббота, 01 Сентября 2012, 17:03 | Сообщение # 17
частый гость
Сейчас нет на сайте
Quote (Saitei)
Как сделать? Слышал про резиновые сайты, мне даже показывали. Не умею. Вот у меня разрешение экрана 1920х1080, а хочу чтобы моя браузерная игра в будущем выглядела нормально и, скажем, при маленьком разрешении 800х480. Что делать? Хотелось бы мне не тупить и сразу же начать нормальную разработку, учитывая разные разрешения экранов...

Добавлено (29.07.2012, 13:11)
---------------------------------------------
p.s. и чтобы всё содержимое блоков (текст, картинки) + сами блоки под разрешение подстраивались. Помогите пожалуйста. С меня большой плюсик)

Это называется вёрстка.
вот тебе пару уроков
ТЫК
ТЫК
P.S "Я делал вёрстку через фотошоп"


arrow25Дата: Суббота, 01 Сентября 2012, 17:32 | Сообщение # 18
постоянный участник
Сейчас нет на сайте
IGRAMEN, АДЦКИЙ однако верстальщик)) , тут совсем про другое спрашивали.
для этих целей уже существует не мало различных framework'ов.
romgermanДата: Суббота, 01 Сентября 2012, 17:37 | Сообщение # 19
старожил
Сейчас нет на сайте
IGRAMENДата: Суббота, 01 Сентября 2012, 18:30 | Сообщение # 20
частый гость
Сейчас нет на сайте
Quote (arrow25)
АДЦКИЙ однако верстальщик)) , тут совсем про другое спрашивали.
для этих целей уже существует не мало различных framework'ов.

Да нет.Норма


Форум игроделов » Движки для разработки игр и сложные системы разработки » Движки для браузерных игр » Сайт под разные разрешения экранов
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:

Все права сохранены. GcUp.ru © 2008-2023 Рейтинг